html - 如何将 margin-top 应用于 标签？

Question

我想设置margin-top至 <small>标签。换句话说，我怎样才能增加 <small> 的空间？用上层元素标记？

注意:我可以使用 line-height 增加空间, 但我只想从顶部设置空间，而不是顶部和底部。

small{
    margin-top: 100px;
    color: #999;
}

<div>It is a test<div>
<small>this need to some margin-top</small>

我该怎么做？

Answer 1

Box Model - 8.3 Margin properties

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements.

small 标签默认是 inline。正如上面的规范所述，垂直边距不适用于严格的 inline 级别元素。

您可以将 display 更改为 inline-block，它会按预期工作:

small {
  margin-top: 100px;
  color: #999;
  display: inline-block;
}

<div>It is a test<div>
<small>this need to some margin-top</small>