為什麼我的內聯塊元素沒有並排對齊？

內聯塊元素無法並排對齊

考慮這樣一個場景，其中兩個帶有 display: inline-block 的元素被分配了 50% 寬度。人們可能期望它們並排放置，但實際上它們超出了可用空間。要解決此問題：

問題的起源

內聯塊元素繼承了它們之間的邊距，儘管看起來在視覺上消除了它。這個額外的空白（通常約為 4 像素）會導致兩個元素的總寬度超過 100%。

替代解決方案

• 減少元素寬度：減少將一個元素的寬度設定為 49% 解決了溢出問題，但引入了不良情況間隙。
• 浮動元素：浮動兩個元素可以正確對齊它們，保持每個元素 50% 的寬度。

現代瀏覽器的理想解決方案（2021 年及以後） )

Flexbox 或CSS網格佈局是內聯塊的推薦替代方案。它們可以更好地控制間距和佈局，而不會出現固有的空白問題。

內聯塊和空白

為了說明空白問題，請考慮以下程式碼：

body {
  margin: 0; /* remove default body margin */
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}

<div class="left">foo</div>
<div class="right">bar</div>

雖然元素看起來相鄰，但實際上它們之間的間距很窄。

以上是為什麼我的內聯塊元素沒有並排對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！