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

如何将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说,"If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it."如果我在中间有一个像下面这样的空段......

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

...然后我希望看到这是一个空段落,即 HelloWorld 之间有一个额外的垂直空间:

  • 什么会阻止这个空段的边距折叠,而空段因此是不可见的:这是非零填充吗?

  • 在什么情况下 is 它有用于一个盒子有相邻的顶部和底部边缘崩溃?


欢迎回答任何或所有这三个问题 .

我目前对IE特定的盒子模型问题并不特别感兴趣:相反,我想知道如何使用该标准 .

回答(4)

2 years ago

要回答第一个问题,如果使用边距或填充来添加元素之间的间距通常无关紧要,但是如果将边框应用于元素并使用填充来创建空格,则会将边界向外推出 .

要回答你的第二个问题,只需看看这段代码,也许可以玩它:

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

2 years ago

回答你的 3rd 问题;

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

您可以强制元素在空白时呈现,方法是给它一个高度或填充,或者包括一个不间断的空间&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>

2 years ago

呵呵,嗯......网页浏览器是不同的,我会说与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>

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

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

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

再说一次,这是很多东西,所以我不会详细说明,但你需要知道这些事情,你将通过练习获得这些知识 .

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

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

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

继续测试并阅读那些优秀的CSS博客 . 遇到真正模糊的边缘情况时请求帮助 . 这些人花了很多时间试图解决,你花时间学习如何做到这一点比重新发明轮子更好 .

2 years ago

你需要知道的主要事情是,相邻(垂直)边距仅仅是如此,如果你有:

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

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

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

在本说明书中,表达式折叠边距意味着两个或多个框(可能彼此相邻或嵌套)的相邻边距(没有填充或边界区域将它们分开)组合形成单个边距 . 在CSS2中,水平边距永远不会崩溃 . 垂直边距可能会在某些框之间折叠:正常流动折叠中的两个或多个相邻的块框垂直边距 . 得到的边距宽度是相邻边距宽度的最大值 . 在负边距的情况下,负邻接边距的绝对最大值从正相邻边距的最大值中扣除 . 如果没有正边距,则负相邻边距的绝对最大值将从零中扣除 . 浮动框和任何其他框之间的垂直边距不会折叠 . 绝对和相对定位的盒子的边缘不会崩溃 . 有关折叠边距的说明,请参阅边距,填充和边框的示例 .

边界有点不同,特别是在tables中,它们可以相互折叠或不依赖于CSS .

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