4

CSS 'margin' 和 'padding' 应该如何用于垂直段落间距：

  • 可以使用填充和/或使用边距来定义段落之间的垂直空间吗？
  • 如果两者都可以，那么使用哪个更好或更正常？
  • 您是否倾向于定义非零填充和非零边距，如果是，那么每个定义多少？

边距、内边距和边框的示例在理论上解释了边距和内边距之间的区别：我质疑在实践中要使用多少来呈现正常、美观的页面。

其次，给定如下标记......

<p>Paragraph.</p>
<ul>
<li>List item.</li>
<li>Another list item.
<p>List paragraph.</p>
</li>
</ul>

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

  • 您是否倾向于将其定义<ul>为具有零边距+填充？
  • 或者<ul>通常会有非零边距，这将没有效果，因为这个边距将与<li>它内部的边距和<p>它之前的边距一起折叠？

第三（我不确定我是否应该问第三个问题），折叠边距的规范说，“如果盒子的顶部和底部边距相邻，那么边距有可能通过它折叠。” 如果我在中间有一个像下面这样的空段落......

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

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

  • 什么会阻止这个空段落的边距折叠，因此空段落是不可见的：它是非零填充吗？
  • 在什么情况下，一个盒子有相邻的顶部和底部边距折叠是有用的？

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

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

4

4 回答 4

3

要回答您的第一个问题，通常使用边距或填充来添加元素之间的间距并不重要，但是如果您将边框应用到元素并使用填充来创建空间，它会将边框推出那么远。

要回答您的第二个问题，只需查看此代码并尝试使用它：

<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>在我的布局中使用越来越少，但是这篇文章看起来很有趣，我认为提供了比 W3C 更好的解释。

于 2009-02-20T08:11:06.473 回答
2

回答你的第三个问题；

第二个 < P > 作为一个空的块级元素根本不会被渲染。

您可以通过给它一个高度或填充，或包括一个不间断的空间来强制元素在空时呈现  段内。（可能有更多方法可以做到这一点）。
正常的空格（例如换行符、制表符或空格）在这方面似乎不起作用。

编辑#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>
于 2009-02-20T07:53:59.230 回答
0

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

根据 xhtml1-strict.dtd，只有 <li/> 可以是 <ul/> 的子级。我建议你给自己找一个了解标准的设计师。这些是您可以用来验证 HTML 的正式规范。

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

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

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

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

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

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

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

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

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

于 2009-02-20T07:30:06.057 回答
0

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

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

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

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

在本说明书中，表达 折叠边距意味着两个或多个框（可能彼此相邻或嵌套）的相邻边距（没有填充或边框区域将它们分开）组合形成单个边距。

在 CSS2 中，水平边距永远不会塌陷。

某些框之间的垂直边距可能会折叠：

  • 正常流程中两个或多个相邻的块框垂直边距折叠。生成的边距宽度是相邻边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值​​中减去负相邻边距的绝对最大值。如果没有正边距，则从零中减去负相邻边距的绝对最大值。
  • 浮动框和任何其他框之间的垂直边距不会折叠。
  • 绝对和相对定位框的边距不会塌陷。

请参阅边距、填充和边框的示例，以获取折叠边距的说明。

边框有点不同，特别是在表格中，它们可以根据 CSS 相互折叠或不折叠。

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

于 2009-02-20T07:43:39.940 回答