Question

下面的代码显示了div中的两个宽度较小的链接。

<style>
div{
width: 89.5px;
border:1px solid #ddd;
}

a{
  border:1px solid red;
  display: inline;

  margin-bottom:30px;
}
</style>
<div>
<a href="#">AAAAAAA</a>
<a href="#">BBBBBBBB</a>
</div>

任何想法为什么margin-bottom:30px;不起作用，以便一个按钮位于另一个按钮下方约30px？

轻微修改此代码的最佳方式是什么，以便按钮之间存在差距？

如果需要，这里是jsFiddle。谢谢。

Answer 1

内联元素不具有边距。

如果您需要添加到链接边距，则需要建立此block或inline-block链接。您需要inline-block此处。

a {display: inline-block}

当您设置block时，保证金将被删除，链接宽度将为100％（或更好，100% - side margins - paddings - borders）。

注意：您设置display: inline，在这种情况下不执行任何操作。默认情况下，链接为inline。

Answer 2

我看到了问题，因为你使用的是display：inline而不是display：block。

a{
  border:1px solid red;
  display: block;

  margin-bottom:30px;
}

margin-bottom在这种情况下不起作用

2 个答案: