边距底部不会在<a> tag</a>以下创建空间

Question

在我的HTML表单中，我有一个链接<a href='...'>...</a>，后跟一个标签<label ...>...</label>。我为这个链接设置了一个下限：

form a {
    margin-bottom: 10px;
}

当我使用Google Chrome控制台检查元素时，a标记确实有margin-bottom 10px。但标签正好在它下面没有空间。我怎样才能在那里产生一些空间呢？

Answer 1

默认情况下，a标记是内联元素，因此无法添加边距。您需要将a标记显示为块元素，以查看与块元素关联的边距和其他属性：

form a {
    display: block;
    margin-bottom: 10px;
}

Answer 2

最好将链接包装在段落<p>标记中。然后添加边距。

<p><a href="#">...</a></p>

和css：

p {
    margin-bottom: 10px;
}

元素需要是块级别才能实现垂直间距。或者，您可以使用a

强制阻止display: block

Answer 3

制作锚标记display:inline-block;，使其占用边距。

form a {
    display:inline-block;
    margin-bottom: 10px;
}