像段落这样的HTML元素的margin-bottom的基本原理是什么,而不是顶部和底部的边距?

时间:2012-10-18 09:15:47

标签: html css twitter-bootstrap margins

Twitter Bootstrap和其他项目是否有理由覆盖段落等元素的默认浏览器边距?

浏览器默认(顶部和底部1em边距):

p { margin: 1em 0; }

Twitter Bootstrap(仅在底部10px边距):

p { margin: 0 0 10px; }

我的偏好(10px边距,或垂直节奏长度,在顶部和底部):

p { margin: 10px 0; }

以下是我的想法:

在顶部和底部有保证金,我可以依靠保证金折叠来确保元素之间的保证金不会太大。我确信应该与其他元素隔开的元素将是。

只有底部的边距,我必须在带有衬垫的容器中放置段落和类似物,或者将它们与它们上方的元素齐平,或者将边缘底部应用于可能位于它们上方的任何东西,以确保设计间隔进行。

总的来说,我更喜欢浏览器默认设置。有什么我想念的吗?是否有讨论此主题的博客或文章?

2 个答案:

答案 0 :(得分:4)

这个小提琴应该说明原因:http://jsfiddle.net/men62/1/

关于文本与容器和其他元素的一致布局。

答案 1 :(得分:2)

我不太确定自己,但我想,因为在编写规则和印刷设计时我们都习惯于这套规则:每个段落都应该有一些余地。

我记得在一段时间前我写过的一篇写作课,每段的底部边距表示新段落的开头。如果无法应用底部边距,也可以使用缩进作为新段落的标记。 Wikipedia has some explanation基于Robert Bringhurst的书,印刷风格的元素

  

印刷风格元素表明“至少有一个en   [空格]“应该用于在第一个之后缩进段落,   注意到这是“实际的最低限度”。

     

...

     

其他技术也是可能的。线条可以缩进以表示   新段落的开头。另一种技术是插入垂直   段落之间的空间。这创造了有时被称为的东西   “阻止段落”。

在Microsoft Word等字处理器软件上,默认情况下也会设置每个段落底部有一些间距(通常为10pt)。当它被应用到网络上时,似乎占据了底部边缘技术。

blog post from Marco Dugonjic似乎暗示“设置底部边距等于元素的线高确保正确的垂直方向。”