Question

如何将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特定的盒子模型问题并不特别感兴趣：相反，我想知道如何使用该标准。

Answer 1

要回答你的第一个问题，如果你使用边距或填充来增加元素之间的间距通常无关紧要，但是如果你对一个元素应用一个边框并使用填充来创建一个空格它将推出边界到目前为止

要回答第二个问题，请看一下这段代码，然后再玩一下：

<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更好的解释。

Answer 2

回答第3次问题;

第二个＆lt; P>作为一个空块级元素，根本不会被渲染。

你可以通过给予高度或填充，或者在para中包含一个非破坏空间＆amp; nbsp; 来强制渲染元素。（可能有更多方法可以做到这一点）正常的空格（例如换行符，制表符或空格）似乎在这方面不起作用。

编辑＃2 ::要正确说明这一切是如何工作的，请在本地保存并查看渲染内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
        <style type="text/css" media="screen">
            p { margin:10px; background-color:#ccc;}
            p.padding { padding:5px; background-color:#eec; }
            p.height { height:30px; background-color:#cee; }

        </style>
    </head>
    <body>

        <p>text</p>
        <p class="padding">i have padding</p>
        <p class="padding"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p>5 empty paragraphs before this, only one will render. (it has padding)</p>
        <p>& nbsp;</p>
        <p>     </p>
        <p>     </p>
        <p>





        </p>
        <p>3 whitespace before me, one will render, it has &amp;nbsp;</p>
        <p class="height">im 30 px high</p>
        <p class="height"></p>
        <p></p>
        <p></p>
        <p>3 empty before me, 1 will show (it has height)</p>
        <p>text</p>
        <p>text</p>

    </body>
</html>

Answer 3

呵呵，嘿嘿......网页浏览器不同，我说使用Firefox的情况通常与标准相符，但这也不完全正确。

根据xhtml1-strict.dtd仅＆lt; li /＆gt;可以是＆lt; ul /＆gt;的孩子。我建议你让自己成为一个了解标准的设计师。这些是正式的规范，您可以使用它来验证您的HTML。

<p>Paragraph.</p>
<ul>
    <li>List item.</li>
    <li>Another list item.
    <p>List paragraph.</p> <!--illegal here-->
    </li>
</ul>

但回到你的问题（顺便说一下，这是一个痛苦的回答）。在许多情况下，您将定义非零边距和填充。当不需要填充时，我倾向于选择额外的边距，然后在边距不起作用时填充。每种情况都不同，你需要知道何时首选。

我不会详细说明，因为我认为你在这里走在正确的轨道上。继续尝试，我知道你会得到它。但请记住，Web浏览器以不同的方式执行操作。

我不确定崩溃边缘的东西，但白色空间有时算作边际。如果一堆元素在它们之间没有空白区域，那么有时候与没有空白区域的区域不同。

同样，这需要很多，所以我不会详细说明，但你需要知道这些事情，你会通过练习获得这些知识。

默认情况下段落和列表边距不是相同的跨浏览器，当您开始执行所有布局时，您需要为页面定义一组基本CSS规则。如果您需要有关设置边距的帮助，我建议您查看canons of page construction。

p { margin: 1em 0; }
ul { margin: 1em 0; }
ul > li { margin: 1em 0; }

上述规则只是一个例子，但他们所做的是尽管浏览器确保段落和列表项的顶部和底部边距相同。这样的事情使您的页面看起来像是相同的跨浏览器。

继续测试并阅读优秀的CSS博客。遇到真正模糊的边缘情况时请求帮助。这些人花费了大量的时间来尝试解决问题，而且你花时间学习如何做到这一点比重新发明轮子更好。

Answer 4

你需要知道的主要事情是，相邻（垂直）边距仅仅是如此：

p { margin: 1em 0; }
...
<p>Paragraph one</p>
<p>Paragraph two</p>

它们之间的空间是1em而不是2em。

填充是分开的。如果段落有填充，它将在他们的盒子里面。所有这些事情的真相来源是W3C CSS标准。例如，collapsing margins：

在本说明书中，表达式   折叠边距意味着   相邻的边缘（没有填充或   两个或两个边界区域   更多的盒子（可能在一个旁边   另一个或嵌套的）组合形成一个   单一保证金。

在CSS2中，水平边距永远不会   崩溃。

垂直边距可能会崩溃   某些方框：


正常情况下两个或多个相邻的块状框的垂直边距   流动崩溃。结果保证金   宽度是相邻的最大值   边距宽度。在负面的情况下   边际，绝对最大值   扣除负邻接保证金   从最大的积极   毗邻的边缘。如果没有   正边际，绝对最大值   负相邻边距是   从零开始扣除。

浮动框与任何其他框之间的垂直边距不会   崩溃。

绝对和相对定位的盒子的边距不会   坍方。


请参考保证金的例子，   填充和边框   折叠边缘的插图。

边框略有不同，特别是在tables中，它们可以相互折叠或不依赖于CSS。

现在故事并没有结束。浏览器可以根据它们如何计算宽度，边距，边框和填充的组合而有所不同，但是通过强制浏览器进入标准模式（使用DOCTYPE）和一个大的主题本身（这是为了最大限度地减少这些类型问题）。

CSS框模型（边距和填充）用于段落之间的垂直间距

4 个答案: