你把你的CSS页边距放在哪里？

当你想添加HTML元素之间的空白（使用CSS），你附加到哪个元素？你把你的CSS页边距放在哪里？

我经常在我沿着这些线路情况：

<body> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div>This is a footer</div> 
</body>

现在，说我想1EM的这些元素之间的空间，但没有上面的第一个H1或最后一个div下面。我会附加哪些元素？

显然，有此之间没有真正的技术区别：

h1, p { margin-bottom: 1em; }

...这...

div { margin-top: 1em; } 
p { margin-top: 1em; margin-bottom: 1em }

我很感兴趣的是次要因素：

一致性
适用于所有情况
易于/简单
制作易于改变

例如：在这个特殊的情况下，我会说，第一个解决方案比第二个好，因为它更简单;你只在一个属性定义中附加一个margin-bottom到两个元素。不过，我正在寻找更通用的解决方案。每次我做CSS工作时，我都会觉得应该有一个好的经验法则......但我不确定它是什么。有没有人有一个很好的论点？

来源

2008-09-19 Craig Walker

我倾向于使用的元素底部边缘时，我希望他们的下一个元素之前有空间，然后使用“去年”类中的CSS从最后一个元素去除余量。

<body> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div class="last">This is a footer</div> 
</body>

div { margin-bottom: 1em; } 
p { margin-bottom: 1em; } 
h1 { margin-bottom: 1em; } 
.last {margin-bottom: 0; }

在你的榜样，虽然，这可能不是是适用，作为页脚股利将最有可能有它自己的种类和具体的造型。当我依次有几个相同的元素（段落和不是）时，我仍然使用“.last”方法。当然，我从“元素”CSS框架中挑选了这种技术。

来源

2008-09-19 22:32:55 Pavling

如果你不介意回避IE6，你总是可以回头看看CSS2：first-child和last-child伪选择器来做你的出价！ – 2009-12-04 18:44:53

我倾向于同意你的看法，第一种选择更好。这通常是我喜欢做的事情。但是，有一种观点需要指出，您应该为每个元素指定一个边距，如果您不想应用它，则会将其归零，因为浏览器都会以不同方式处理边距。 <p>（以及我认为的<h1>标签）通常会有浏览器给定的默认页边距，如果没有指定。

来源

2008-09-19 22:33:21

这要由你正在设计什么的细节部分驱动的，但有一种粗糙的层次结构的这些东西，比方说，一个典型的博客索引：

你会在页面上有一个页脚。
你将有一个标题每条目。
你将有每个条目n段落。

为您的段落建立空格，知道它们有时会按顺序出现 - 您需要担心它们如何看起来像一个系列。从那里，调整你的头来处理条目之间的边界。最后，调整您的页脚/页面空间以确保页面底部看起来不错。

这是一个缩略图草图。你如何最终落得分配你的填充是完全取决于你，但如果你从自下而上的角度来看待它，你可能会看到更少的惊喜你调整第一最常见的/丰富的元素，然后后的不太常见的。

来源

2008-09-19 22:34:59

如果你想要一个元素周围的空间，给它一个边缘。这意味着，在这种情况下，不要只给<h1>一个底部空白，但给<p>一个顶部空白。

请记住，当两个元素垂直相邻，并且它们之间没有边框或填充时，它们的边距将折叠。这意味着只考虑两个边界中较大的边界 - 它们不会加在一起。所以这个：

h1, p { margin: 1em; } 

<h1>...</h1> 
<p>...</p>

...会导致标题和段落之间1em的空格。

来源

2008-09-19 23:03:56 Jim

吉姆所做的一点是关键。元素之间的边距崩溃，它们不是叠加的。如果你想要确保在段落和标题之上和之下有1em的保证金，并且页眉下方和页脚上方有1em保证金，那么你的CSS应该反映这一点。

鉴于这种标记（我添加了一个头，并放置在页眉/页脚IDS）：

<body> 
    <div id="header"></div> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div id="footer">This is a footer</div> 
</body>

你应该使用这个CSS：

#header { 
    margin-bottom: 1em; 
} 

#footer { 
    margin-top: 1em; 
} 

h1, p { 
    margin: 1em 0; 
}

现在你的元素的顺序没关系。如果您使用了两个连续的标题，或者使用段落而不是标题来启动页面，它仍然会呈现您所注意的方式。

来源

2008-09-21 05:35:17 Prestaul

采用先进的CSS 2个选择器，另一种解决方案是可能的，不依赖于一类last引进布局信息入HTML。

该解决方案使用adjacent selectors。不幸的是，MSIE 6不支持它，所以不愿意使用它是可以理解的。

h1 { 
    margin: 0 0 1em; 
} 

div, p, p + h1, div + h1 { 
    margin: 1em 0 0; 
}

这样，第一h1不会有顶边距，而紧随其后段落或盒子任何h1具有上边距。

来源

2008-09-21 17:44:15

我是一个相对的新手，但我自己解决的事情，我认为你和我碰到了（改变边距一个标签可以在一个网站的一部分梳理间距，只有打扰以前好在其他地方的间距？）现在是为所有标签分配一个相等的边缘顶部和底部。你可能希望H1以上和以下的空间比H3或ap要多，但总的来说，我认为页面在任何给定的文本上方和下方都有相同的空间，所以这个解决方案适用于我，满足你的'简单经验法则'规范，希望！

来源

2009-04-25 10:12:24

我刚刚使用了第一个孩子和最后一个孩子。因此，例如纯CSS：

h1{ 
    margin-top:10px; 
    margin-bottom:10px; 
} 
h1:first-child{ 
    margin-top:0px; 
} 
p{ 
    margin:10px; 
} 
p:first-child{ 
    margin-top:0px; 
} 
p:last-child{ 
    margin-bottom:0px; 
}

这是一个基本的例子，但你可以申请这更多的元素和结构是更好，如果使用SASS，LESS等等:)

来源

2015-11-27 10:13:35 JDavies

这是应该的完成：

body > * { 
    margin-bottom: 1em; 
} 
body > *:last-child { 
    margin-bottom: 0; 
}

现在，你不必担心什么元素是第一，什么元素是最后一个，你不必总是把一类特殊的最后一个元素上。

这将不会“工作”的唯一时间是最后一个孩子是没有渲染。在这种情况下，你可以考虑在最后一个可见的孩子上使用margin-bottom:0;。

来源

2016-01-14 21:05:18

你把你的CSS页边距放在哪里？

回答

相关问题