CSS 'margin' 和 'padding' 应如何用于垂直段落间距:
- 段落之间的垂直空间可以使用填充和/或使用边距来定义吗？
- 如果两者都可以，那么哪个更好或更正常？
- 您是否倾向于定义非零填充 和 非零边距，如果是，那么每个有多少？
Example of margins, padding, and borders 从理论上解释了边距和填充之间的区别:我想问的是在实践中分别使用多少来渲染一个正常的、好看的页面。
其次，给出如下标记......
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
如果您希望每个段落和/或列表项之间的垂直间距相等，则:
- 你会倾向于定义
<ul>吗？拥有自己的零边距+填充？ - 或者
<ul>通常具有非零边距，这将没有任何效果，因为此边距将与<li>的边距一起折叠在里面和<p>哪个在它之前？
第三(我不确定我是否应该问第三个问题)，specification for collapsing margins说，“如果盒子的顶部和底部边距是相邻的，那么边距可能会通过它折叠。”如果我在中间有一个像下面这样的空段落......
<p>Hello</p>
<p></p>
<p>World</p>
...然后我希望将其视为一个空段落，即 Hello 之间有额外的垂直空间。和 World :
- 什么可以防止这个空段落的边距折叠，从而使空段落不可见:是非零填充吗？
- 在什么情况下让一个盒子有相邻的顶部和底部边缘折叠有用吗？
欢迎回答这三个问题中的任何一个或所有问题。
目前我对特定于 IE 的框模型问题并不特别感兴趣:相反，我想知道如何使用该标准。
最佳答案
要回答您的第一个问题，通常使用边距或填充来增加元素之间的间距并不重要，但是如果您将边框应用于元素并使用填充来制作空间，它会将边框推出那么远.
要回答您的第二个问题，请看一下这段代码，也许可以尝试一下:
<html>
<head>
<title>Box Model Tests</title>
<style type="text/css">
/* Just to get rid of the annoying padding/margin setting that is default
in most browsers on the body tag from messing up our experiments */
body{
margin: 0px;
padding: 0px;
}
p{
margin: 0px;
padding: 0px;
}
/* It appears that if you modify the ul padding it tends
to remove the bullet points, that is if you set the paddign to zero */
ul{
margin: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>
</body>
</html>
请记住，在上面的示例中，所有剩余空间都与字体属性有关，可以使用与任何其他元素相同的方法更改这些属性。
第三个:
我认为 'garrow' 关于空 <p> 是正确的
当我使用 <p> 时，我不会经常遇到这个问题。然而，我的布局越来越少this article看起来非常有趣，我认为提供了比 W3C 更好的解释。
关于padding - 用于段落之间垂直间距的 CSS 框模型(边距和填充)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/568561/