0

我有一个关于 HTML/CSS 和某些元素的边距行为的基本问题。
为了说明我的观点，我创建了这个小提琴：http: //jsfiddle.net/5VA5h/

你看，我应用了某种“重置”并为所有h1.
在第一个示例中，marginfromh1应用于盒子的外部，而在#c, where h1is setdisplay: inline;中，它应用于盒子的内部。

为什么会这样？

4

3 回答 3

3

在您的第一个示例中，<h1>作为块元素，上边距正在折叠（强调我的）：

在 CSS 中，两个或多个框（可能是或不是兄弟）的相邻边距可以组合形成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。

...然后：

两个边距相邻当且仅当：

  • 两者都属于参与相同块格式化上下文的流入块级框
  • 没有线框，没有间隙，没有填充和没有边框将它们分开（请注意，某些零高度的线框（见 9.4.2）为此目的被忽略。）
  • 两者都属于垂直相邻的框边，即形成以下对之一：
    • 一个盒子的上边距和它的第一个流入孩子的上边距
    • 框的下边距和其下一个流入跟随兄弟的上边距
    • 如果父级具有“自动”计算高度，则最后一个流入子级的下边距和其父级的下边距
    • 没有建立新的块格式化上下文并且具有零计算的“最小高度”、零或“自动”计算的“高度”且没有流入子级的框的顶部和底部边距

第二个例子，<h1>作为内联元素，垂直边距不生效：

'margin' 速记属性设置所有四个边的边距，而其他边距属性只设置它们各自的边。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素产生任何影响。

于 2013-01-16T12:58:40.137 回答
0

具有 display:inline 的元素不使用 Margin-Top 和 Margin-Bottom；请参阅：内联元素中的顶部边距

于 2013-01-16T12:49:56.367 回答
0

内联元素中的顶部和底部边距并不重要。在内联元素中，每个元素代表文本中的一个单词。

于 2013-01-16T12:55:14.303 回答