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

StackOverflow https://stackoverflow.com/questions/568561

  •  05-09-2019
  •  | 
  •  

题

CSS“边距”和“填充”应如何用于垂直段间间距：

  • 可以使用填充和/或使用边距定义段落之间的垂直空间吗？
  • 如果可以使用哪一个，那么使用哪个是更好或更普通的？
  • 您倾向于定义非零填充吗 和 非零边缘，如果是的话，那么每一个。

这 边缘，填充和边界的示例 解释 理论上 边距和填充之间有什么区别：我质疑每种使用多少 在实践中, ，呈现一个正常的，好看的页面。

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

<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>

...然后我希望将其视为一个空的段落，即在 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>

请记住，在示例中，所有其余空间都与字体的属性有关，该属性可以使用与任何其他元素相同的方法更改。

到第三：

我认为“加罗”是对空的 <p>我不遇到这个问题，我经常使用 <p> 但是我的布局越来越少 本文 看起来非常有趣，我认为比W3C提供了更好的解释。

其他提示

回答你 第三 问题;

第二个<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>

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

根据XHTML1-STRICT.DTDu003Cli/>可以是孩子u003Cul/>。我建议您让自己成为一名知道标准的设计师。这些是您可以使用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博客。当您遇到真正晦涩的边缘案例时，请寻求帮助。这些人花了很多时间试图解决，而您的时间比重新发明方向盘更好地学习了他们的做法。

您需要知道的主要内容是，相邻的（垂直）边缘仅仅是：如果您有：

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

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

填充是分开的。如果段落有填充物，它将在他们的盒子里。所有这些事物的真相来源是W3C CSS标准。例如， 崩溃的边缘:

在此规范中，表达式 崩溃的边缘 意味着将两个或多个盒子（可能彼此或嵌套）的边缘（没有填充或边界区域分开）组合形成一个边缘。

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

垂直边缘可能在某些框之间崩溃：

  • 正常流动崩溃中的两个或更多隔侧侧缘的垂直边缘。所得的边缘宽度是相邻边缘宽度的最大值。在负边缘的情况下，毗邻边缘的负面边缘的绝对最大值是从毗邻边缘的最大值中扣除的。如果没有正缘，则从零扣除负相邻边缘的绝对最大值。
  • 漂浮盒和任何其他盒子之间的垂直边缘不会崩溃。
  • 绝对和相对位置的盒子的边缘不会崩溃。

请咨询保证金，填充和边界的例子，以示例折叠利润。

边界有些不同，尤其是 表 它们可以彼此崩溃或取决于CSS。

现在，这个故事当然还没有结束。浏览器可以在计算宽度，边缘，边界和填充的组合方面有所不同，但是通过强迫浏览器进入标准模式（具有Doctype）和一个很大的主题，这在很大程度上会降低（就像您所做的那样，您所做的就是最小化这些种类的各种各样的事情问题）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top