span元素顶部margin未显示问题求助及原因解析

你设置了.text_line的margin:60px，但实际效果只有左右margin和上下padding生效，上下margin没有显示出来，如图所示：

问题核心是span默认是行内（inline）元素，这类元素的垂直方向margin不会影响布局的垂直空间，所以设置的上下margin无法正常显示。

解决方案 #

给.text_line添加display属性，将其改为块级元素或行内块级元素即可：

方式1：改为块级元素（每个span独占一行）

.text_line {
  border: solid black 2px;
  margin: 60px;
  padding: 40px;
  display: block; /* 添加这行 */
}

方式2：改为行内块级元素（span可在同一行排列，空间足够时）

.text_line {
  border: solid black 2px;
  margin: 60px;
  padding: 40px;
  display: inline-block; /* 添加这行 */
}

修改后的HTML保持不变：

<Section>
  <span class="text_line">Isso é um teste 1</span>
  <span class="text_line">Isso é um teste 2</span>
</Section>

原理说明 #

行内元素（如span、a、em等）的盒模型特性是：仅水平方向的margin、padding会影响布局，垂直方向的margin不会改变元素的垂直位置，也不会推开其他元素；而块级/行内块级元素的盒模型支持完整的margin、padding生效，垂直方向的间距会正常显示。

内容的提问来源于stack exchange，提问作者Adriano Araujo