為什么包含在內聯塊級元素內的塊級元素顯示為內聯？

Question

我創建了一個小提琴來展示這個問題： https ： //jsfiddle.net/vanillasnake21/bf0j0v5L/

<a>
  <span> close </span>
</a>

<a>標簽設置為display:inline-block ， <span>是display:block ，當<span>未被<a>標簽包圍時，它會跨越頁面的整個寬度，正如我所期望的那樣塊級元素應該。 當如上所示用a標簽括起來時，即使在開發工具中檢查它仍然將其顯示為塊元素，它看起來就像顯示為內聯。 為什么會發生這種情況，為什么<span>不會<span> <a>元素的整個寬度？

Answer 1

您的span元素無法占據頁面的整個寬度。 從技術上講，您在內聯塊元素中呈現塊級元素。 所以你的塊級元素確實占用了父寬度的100％。

由於沒有為父inline-block定義width ，因此它占用了inline-block元素中的任何空間。 為了演示這一點，如果我為你的inline-block元素指定一些width ，則span將獲取父元素的所有可用寬度。

a {
  display: inline-block;
  padding: 1em 7em;
  width: 400px; /* define some width here to the parent */
  background-color: green;
}

 span { background-color: red; display: block; } a{ display: inline-block; padding: 1em 7em; width: 400px; background-color: green; } 

 <a> <span> close </span> </a> 

演示

在這里，當您為父內聯塊元素指定width ，您的span將獲取它獲得的所有寬度。

---

另一個例子，添加了box-sizing來計算元素內部的padding ，並附加width: 100%; 到父元素。

 span { background-color: red; display: block; } a{ display: inline-block; box-sizing: border-box; padding: 1em 7em; width: 100%; background-color: green; } 

 <a> <span> close </span> </a> 

演示2

---

請注意，在內聯塊元素內呈現塊級元素不會強制父元素占用文檔上的所有可用水平空間。