在這種情況下，margin-bottom不起作用

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;
}