代码之家 › 专栏 › 技术社区 › ChrisW

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

css margin padding

ChrisW · 技术社区 · 17 年前

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

4 回复 | 直到 17 年前

teh_noob 17 年前

为了回答你的第一个问题,通常使用边距或填充来增加元素之间的间距并不重要,但是如果你对元素应用边框并使用填充来创建空间,它会把边框推到那么远。

要回答你的第二个问题,只需看看这段代码,也许可以尝试一下:

<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>; this article 看起来很有趣,我认为它提供了比W3C更好的解释。

garrow 17 年前

回答你的问题;

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

John Leidegren 17 年前

呵呵,好吧。..网络浏览器是不同的,我想说与Firefox配合良好的东西通常与标准配合良好,但这也不完全正确。

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

但回到你的问题(顺便说一句,这很难回答)。在许多情况下,您会定义非零边距和填充。我倾向于在不需要填充时增加额外的边距,然后在边距不起作用时进行填充。每种情况都不一样,你需要知道什么时候更喜欢。

我不会详细说明,因为我认为你在这方面走得对。继续尝试,我知道你会明白的。但请记住,网络浏览器的操作方式不同。

我不确定是否会出现空白,但空白有时也算作空白。如果一堆元素之间没有空格,这有时与没有空格的情况不同。

同样,这需要了解很多,所以我不会详细介绍,但你需要了解这些事情,你会通过练习获得这些知识。

canons of page construction .

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

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

cletus 17 年前

你需要知道的主要事情是,如果你有以下情况,相邻的(垂直)边距就是这样:

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

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

collapsing margins :

在本规范中,表达式 外边距折叠 意味着相邻边距(无填充或边界区域将它们分开)两个或更多盒子(可能紧挨着一个) 另一个或嵌套)组合形成单一利润。

崩溃。

某些盒子:

流动坍塌。由此产生的利润宽度是相邻部分的最大值边距宽度。在否定的情况下边距,绝对最大值从正的最大值相邻的边缘。如果没有正边际,绝对最大值负相邻边距的从零中扣除。

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

崩溃。

请参考保证金示例, 填充和边框边缘塌陷的图示。

边界有点不同,特别是在 tables 它们可以相互折叠,也可以不折叠,这取决于CSS。

当然,故事并没有就此结束。浏览器在计算宽度、边距、边框和填充的组合方面可能会有所不同,但通过强制浏览器进入标准模式(使用DOCTYPE)和一个大主题本身(就像你为尽量减少这些问题所做的那样),这在很大程度上被削弱了。