如何将 margin-top 应用于 <small> 标签？

Question

我想将 margin-top 设置为 <small> 标签。换句话说，我如何用上层元素增加 <small> 标签的 space？

注意：我可以使用line-height增加space，但我只想从顶部设置space，而不是两者顶部和底部。

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>

如何将 margin-top 应用于 <small> 标签？

How to apply margin-top to <small> tag?

html

css

tags