如何将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>
...然后我希望看到这是一个空段落,即 Hello
和 World
之间有一个额外的垂直空间:
-
什么会阻止这个空段的边距折叠,而空段因此是不可见的:这是非零填充吗?
-
在什么情况下 is 它有用于一个盒子有相邻的顶部和底部边缘崩溃?
欢迎回答任何或所有这三个问题 .
我目前对IE特定的盒子模型问题并不特别感兴趣:相反,我想知道如何使用该标准 .
4 回答
要回答第一个问题,如果使用边距或填充来添加元素之间的间距通常无关紧要,但是如果将边框应用于元素并使用填充来创建空格,则会将边界向外推出 .
要回答你的第二个问题,只需看看这段代码,也许可以玩它:
请记住,在上面的示例中,所有剩余空间都与字体属性有关,可以使用与任何其他元素相同的方法进行更改 .
到第三个:
我认为'garrow'是关于空的
<p>
我没有遇到这个问题,因为我在布局中越来越少使用<p>
但是this article看起来非常有趣,我认为提供了比W3C更好的解释 .回答你的 3rd 问题;
第二个<P>作为空块级元素根本不会被渲染 .
您可以强制元素在空白时呈现,方法是给它一个高度或填充,或者包括一个不间断的空间&nbsp;在段内 . (可能有更多方法可以做到这一点) .
在这方面,正常的空格(例如换行符,制表符或空格)似乎不起作用 .
编辑#2 ::要正确说明这一切是如何工作的,请在本地保存并查看渲染内容 .
呵呵,嗯......网页浏览器是不同的,我会说与Firefox相处得很好通常与标准相符,但这也不完全正确 .
根据xhtml1-strict.dtd,只有<li />可以是<ul />的子项 . 我建议你让自己成为一个了解标准的设计师 . 这些是您可以验证HTML的正式规范 .
但回到你的问题(顺便说一句,这是一个痛苦的回答) . 在许多情况下,您将定义非零边距和填充 . 当不需要填充时,我倾向于选择额外的边距,然后在边距不起作用时填充 . 每种情况都不同,你需要知道何时首选 .
我不会详细介绍,因为我认为你在这里走在正确的轨道上 . 继续尝试,我知道你会得到它 . 但请记住,Web浏览器以不同的方式执行操作 .
我不确定崩溃边缘的东西,但白色空间有时算作边际 . 如果一堆元素在它们之间没有空白区域,那么有时候与没有空白区域的区域不同 .
再说一次,这是很多东西,所以我不会详细说明,但你需要知道这些事情,你将通过练习获得这些知识 .
段落和列表边距默认情况下不是相同的跨浏览器,当您开始执行所有布局时,您需要为页面定义一组基本CSS规则 . 如果你想要设置什么边距的帮助我建议你看看canons of page construction .
上面的规则只是一个例子,但他们所做的是确保尽管浏览器,段落和列表项的顶部和底部边距是相同的 . 这样的事情是使您的页面看起来相同的跨浏览器的原因 .
继续测试并阅读那些优秀的CSS博客 . 遇到真正模糊的边缘情况时请求帮助 . 这些人花了很多时间试图解决,你花时间学习如何做到这一点比重新发明轮子更好 .
你需要知道的主要事情是,相邻(垂直)边距仅仅是如此,如果你有:
它们之间的空间将是1em而不是2em .
填充是分开的 . 如果段落有填充,它将在他们的盒子里面 . 所有这些事情的真相来源是W3C CSS标准 . 例如,collapsing margins:
边界有点不同,特别是在tables中,它们可以相互折叠或不依赖于CSS .
现在故事并没有就此结束 . 浏览器可以根据它们如何计算宽度,边距,边框和填充的组合而有所不同,但是通过强制浏览器进入标准模式(使用DOCTYPE)和一个大的主题本身(这是为了最大限度地减少这些类型问题) .