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

【问题标题】：How to apply margin-top to tag?如何将 margin-top 应用于 标签？
【发布时间】：2016-02-16 01:45:06
【问题描述】：

我想将margin-top 设置为 标签。换句话说，我怎样才能增加标签与上部元素的空间？

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

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

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

我该怎么做？

【问题讨论】：

标签： html css tags

【解决方案1】：

Box Model - 8.3 Margin properties

Margin 属性指定框的边缘区域的宽度。 'margin' 速记属性设置所有四个边的边距，而其他边距属性只设置它们各自的边。这些属性适用于所有元素，但垂直边距将对未替换的内联元素没有任何影响。

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>

【讨论】：

很好，谢谢，+1。
抱歉再次询问。你能看看this，告诉我应该如何防止从<div>出去？
@Shafizadeh 将overflow: hidden 添加到父元素以隐藏它(example)。或使用width: calc(100% - 20px)(example)。或者做类似this的事情。