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

Posted

技术标签:

【中文标题】段落之间垂直间距的 CSS 框模型（边距和填充）【英文标题】：CSS box model (margins and padding) for vertical spacing between paragraphs 【发布时间】：2010-10-08 18:54:29 【问题描述】：

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>

如果您希望每个段落和/或列表项之间的垂直间距相等，那么：

您是否倾向于将&lt;ul&gt; 定义为自己的边距+填充为零？ 或者&lt;ul&gt; 通常具有非零边距，这将不起作用，因为该边距将与其中的&lt;li&gt; 的边距和之前的&lt;p&gt; 的边距一起折叠？李>

第三（我不确定我是否应该问第三个问题），specification for collapsing margins 说：“如果框的顶部和底部边距相邻，则边距可能会通过它折叠。”如果我中间有一个像下面这样的空段落......

<p>Hello</p>
<p></p>
<p>World</p>

...那么我希望将其视为一个空段落，即在 Hello 和 World 之间有额外的垂直空间：

什么可以防止该空段落的边距折叠，从而使该空段落不可见：这是非零填充吗？ 在什么情况下让盒子有相邻的顶部和底部边距折叠起来很有用？

欢迎回答这三个问题中的任何一个或所有问题。

目前我对特定于 IE 的框模型问题并不特别感兴趣：相反，我想知道如何使用该标准。

【问题讨论】：

【参考方案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' 对空的&lt;p&gt; 是正确的 我不会经常遇到这个问题，因为我在布局中使用 &lt;p&gt; 的次数越来越少，但是 this article 看起来很有趣，而且我认为它提供了比 W3C 更好的解释。

【讨论】：

啊！在您的第一句话中有一个线索：指定边距（因为它们很好地折叠）而不是指定填充（即指定零填充）可能是正常的吗？除了在指定边框时指定填充之外，因为在这种情况下您希望在边框内添加一些填充？ 好吧，您不一定要指定零填充，在某些情况下，您希望填充以使文档看起来不错。是的，当您添加边框时尤其如此，具有填充以确保边框不在文本旁边总是很好。 如果你有边框，那么我明白为什么需要填充。您是否知道任何未指定边框但仍更喜欢使用内边距而不是边距的示例？ 当我这样做时，我想不出任何具体的例子，但是当我使用 div 进行布局时，我不时必须使用填充作为间距，但并不经常。我喜欢让每个 div 中的元素使用自己的边距/填充来创建空间。我尽量保持逻辑。【参考方案2】：

回答您的第三个问题；

第二个

作为一个空的块级元素根本不会被渲染。

您可以强制元素在空时呈现，方法是给它一个高度或填充，或者在 para 中包含一个非中断空格  。 （可能有更多方法可以做到这一点）。 普通空格（例如换行符、制表符或空格）在这方面似乎不起作用。

编辑 #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>

【讨论】：

如果它只有边距就不会被渲染，因为边距折叠，但是如果它有任何填充，会被渲染是真的吗？即使内容为空，垂直填充（如果已定义）是否仍然存在？因为如果有填充，我猜这会阻止边距相邻。 普通空格并不重要，例如w3.org/TR/2000/WD-xhtml-modularization-20000105/… 表示“必须删除块元素内的前导和尾随空格”。 填充确实给出了元素布局。 感谢您的确认。你是否碰巧知道一个块是否有填充，如果它的样式定义了填充但它没有/空的内容？还是没有内容时所有的填充都会消失？ 填充或高度使元素呈现，即使为空，请参见示例中的空 p.padding。【参考方案3】：

呵呵，嗯...网络浏览器是不同的，我会说与 Firefox 相得益彰的东西通常与标准相得益彰，但这也不完全正确。

根据 xhtml1-strict.dtd，只有

可以是 的子级。我建议你给自己找一个了解标准的设计师。这些是您可以用来验证 HTML 的正式规范。 
<p>Paragraph.</p>
<ul>
    <li>List item.</li>
    <li>Another list item.
    <p>List paragraph.</p> <!--illegal here-->
    </li>
</ul>

但回到你的问题（顺便说一句，这很难回答）。在很多情况下，您会定义非零边距和填充。我倾向于在不需要填充时更喜欢额外的边距，然后在边距不起作用时填充。每种情况都不同，您需要知道何时首选。

我不会详细说明，因为我认为您在这里是正确的。继续尝试，我知道你会明白的。但请记住，网络浏览器的处理方式不同。

我不确定那个折叠边距的事情，但空白有时也算作边距。如果一堆元素之间没有空格，则有时与没有空格的情况不同。

再说一次，需要学习的内容很多，所以我不会详细介绍，但是您需要了解这些内容，并且您将通过练习获得这些知识。

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

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

上述规则只是一个示例，但它们的作用是确保段落和列表项的顶部和底部边距在浏览器中保持相同。这样的事情使您的页面在跨浏览器中看起来一样。

继续测试并阅读优秀的 CSS 博客。当您遇到真正晦涩难懂的边缘情况时寻求帮助。这些人花了很多时间试图解决问题，而你最好花时间学习他们是如何做到的，而不是重新发明***。

【讨论】：

我认为我的 xhtml 片段验证了：我将

嵌套在

中，而不是直接嵌套在 中。 总而言之，您更喜欢使用边距而不是填充。 @ChrisW - 不，我是说有时你必须使用填充，但如果你不需要使用填充使用边距。【参考方案4】：

你需要知道的主要事情是相邻（垂直）边距，所以如果你有：

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

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

填充是分开的。如果段落有填充，它将在它们的框内。所有这些事情的真实来源是 W3C CSS 标准。例如collapsing margins:

在本规范中，表达式 折叠边距意味着 相邻边距（无填充或 边界区域将它们分开）两个或 更多的盒子（可能在一个旁边 另一个或嵌套）结合形成一个 单边距。

在 CSS2 中，水平边距从不 崩溃。

垂直边距可能在 某些盒子：

法线中块框的两个或多个相邻垂直边距 流量崩溃。产生的边距 宽度是相邻的最大值 边距宽度。在否定的情况下 边距，的绝对最大值 减去相邻的负边距 从正的最大值 相邻的边距。如果没有 正边距，绝对最大值 的负相邻边距是 从零中扣除。 浮动框和任何其他框之间的垂直边距不 折叠。 绝对和相对定位框的边距不 坍塌。

请查阅保证金的例子， 填充和边框 折叠边距的插图。

边框有点不同，尤其是在tables 中，它们可以根据 CSS 相互折叠或不折叠。

当然，故事并没有就此结束。浏览器可以在计算宽度、边距、边框和填充组合的方式上有所不同，但通过强制浏览器进入标准模式（使用 DOCTYPE）和本身的大主题（就像你为最小化这些类型所做的那样），这在很大程度上减少了问题）。

【讨论】：

边距合并和填充的事实不应该告诉我它们有什么用处，但我不知道是什么。是否有可能（我的猜测是）如果有一个规范是有微小但非零（即一个像素）的填充和有效的（例如 6 点或 12 点）边距？ 我已经引用了标准，所以我有点知道填充和边距的效果。一些效果（例如段落之间的非零间距）可以用任何一种来完成，我想知道哪个（填充或边距）应该用于段落间距，使用理想的符合标准的浏览器。

以上是关于段落之间垂直间距的 CSS 框模型（边距和填充）的主要内容，如果未能解决你的问题，请参考以下文章

CSS 框模型

html中单元格间距与单元格边距的区别

定位概述

100% 宽度减去边距和填充 [重复]

WORD文本框 文字间距

什么是垂直和水平填充/边距？