位置：相对留下空白

86

代码在这里：http : //lasers.org.ru/vs/example.html

如何删除主块（#page）下的空白？

css

— 基尔
source

您是说底部填充物，还是要使整个东西垂直居中？

— Alex

您是指#page div中的文本和边框之间的空格吗？否则，我不确定您在谈论什么空间。

— 杰里米·

@Jeremy Battle我也不知道，尽管Guffa似乎有。

— alex

其他人没有看到这个问题吗？

— 迈尔斯·格雷

请参考标记在[答案stackoverflow.com/questions/13722095/... ：[1] stackoverflow.com/questions/13722095/...

— 的Sohel帕坦

34

好吧，那就不要使用相对定位了。使用相对定位时，该元素仍会占据原始位置的空间，并且您无法摆脱它。例如，您可以改用绝对定位，也可以使元素彼此浮动。

我对布局进行了一些尝试，建议您将这三个规则更改为：

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

— 古法
source

27

“而且你不能摆脱它。” - 您可以。就像计划中的答案一样，只需使用负边距即可。

— 米哈尔ķ

5

@MichałK：不，这仅意味着您将空白空间与另一个元素重叠，而不是摆脱空白空间。您只能使用负边距使相对位置的空白空间重叠到元素的大小。

— Guffa

@MichałK：否决这个答案和其他完全不相关的答案没有帮助，您仍然无法摆脱相对定位所造成的空间。

— Guffa

1

@MichałK：由于您只能覆盖空间而不能摆脱空间，因此您必须拥有其他元素，其大小至少要与空白空间一样大才能覆盖它。例如，如果元素高200像素的地方有一个空白空间，而只有100像素高的元素可以覆盖该孔，则孔的左边仍然有100像素。

— Guffa 2013年

1

为什么要投票？如果您不解释自己认为是错的是什么，那将无法改善答案。

— Guffa

180

另一个对我有用的技巧是在已移动的相对元素中使用负底距。无需绝对定位。

就像是：

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

与我现在看到的解决方案相似（如果不相同），绿色。

— 计划
source

27

一个简单的好答案。完美的证明HTML / CSS是一个怪胎。

— Synesso

1

@plang，似乎无效。参见jsfiddle.net/u7sq8rL7/1。绿色背景超出了最后一个元素。

— Pacerier，2014年

1

@Pacerier不要使用margin-bottom。它显然不起作用（考虑一下）；您需要保证金最高。

— 威廉

2

这很完美。是的，您可以使用margin-bottom负数，因为您想摆脱底部的多余空间。

— phocks

好人，如果您的布局健康，就可以了

— Vitaliy Terziev

8

#page 
{ 
     overflow:hidden; 
}

展开摘要

— 卡罗尔·麦凯
source

1

#page {
  padding-bottom: 0;
}

没有底部填充

— 亚历克斯
source

这是正确的答案，但是我想说您最好使用padding，因为它更易于阅读，并且在Web上更标准地具有padding。

— 杰里米·

@Jeremy Battle当然，填充看起来更好。

— alex

@Kir实际上，您可以将当前样式修改为padding：8px 16px 0px; 以避免在CSS中多余一行。

— 杰里米·

我认为问题是内容容器下方的300px空间，而不是容器内部的空间...

— Guffa 2011年

该方案将在div（#page）内创建一个匿名框，并且根据CSS规范，没有其他方法可以直接控制匿名框，并且该匿名框将从其父级（在本例中为#page）继承该属性。因此最好通过更改其属性来更改父div，如@alex所说。如果以上条件不符合标准，则在这种情况下使用负余量也是一种解决方案。

— 13年

1

尝试以下规则：

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

我将位置更改为绝对位置，这使您可以使用该bottom: 0属性。

— 萨尔曼A
source

1

我有一个类似的问题。最简单的方法是将top替换margin-top为#page。

— 绿色
source

具有负值的margin-top而不是top + margin-bottom是

— 可行

1

我遇到过同样的问题。负边距对我不起作用，因为它留下了原来的空白区域。我通过手动输入高度来解决此问题。

.maincontent {
    height: 675px;
}

— UkrVolk11
source

1

我的回答很晚，但可能会帮助我解决类似的问题。

我有一个<div>用position: relative;所有的子元素有position: absolute;风格。这造成约20px的空白出现在我的页面上。

为了解决这个问题，我添加了 margin-top: -20px;在<div>with之后了下一个兄弟元素position: relative;。

如果以前有同级元素，则可以使用 margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

展开摘要

— 加布里埃尔·盖茨
source

0

我可以使用以下框架摆脱空白：

HTML-CSS框架

这是标记

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

— 亚伯·卡莱霍
source

0

这个问题似乎得到了很好的解答-但是，以上所有答案在我的版式中都有不良的副作用。这是真正为我工作的东西：

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

展开摘要

— 格弗里德
source

0

如果您不想在（相对）以下留空格，则是最佳解决方案

是用上边距和位置：粘性

#page {
     margin-top: -280px;
     position: sticky;
}

— 电视标记
source