边距底部不会在<a>标签下创建空间

Question

在我的HTML表单中,我有一个链接<a href='...'>...</a>后跟一个标签<label ...>...</label>.我为此链接设置了下限,如下所示:

form a {
    margin-bottom: 10px;
}

当我使用谷歌Chrome控制台检查元素时,a标签确实有margin-bottom10px.但标签正好在它下面没有空间.我怎样才能在那里产生一些空间？

Answer 1

默认情况下,a标签是内联元素,因此不能添加边距.您需要使a标记显示为块元素,以查看与块元素关联的边距和其他属性:

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

Answer 2

将链接包装在段落<p>标签中是更好的做法。然后添加边距。

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

和CSS：

p {
    margin-bottom: 10px;
}

元素需要块级来实现垂直间距。或者，您可以强制阻止awithdisplay: block