帶有“display：inline-flex”的元素有一個奇怪的上邊距

Question

我有兩個div元素，都有CSS屬性display: inline-flex ，因為我想將它們放在彼此旁邊。 起初，div似乎正確定位。

 .userImg{ height: 3em; width: 3em; background: red; display: inline-flex; } .nameOfUser{ display: inline-flex; height: 3em; width: 10em; background: blue; } 

 <div class = "userImg"></div> <div class = "nameOfUser"></div> 

但是，一旦我在nameOfUser div放置了一些文本，它似乎會創建一些奇怪的上邊距，這使得兩個div元素彼此不對齊。

 .userImg{ height: 3em; width: 3em; background: red; display: inline-flex; } .nameOfUser{ display: inline-flex; height: 3em; width: 10em; background: blue; } 

 <div class = "userImg"></div> <div class = "nameOfUser"> <h3>Jaxon Crosmas</h3> </div> 

有人可以解釋為什么會發生這種情況並提供可能的解決方案嗎？

Answer 1

使用display: inline-flex您將處理內聯級元素。

這將激活vertical-align屬性，該屬性僅適用於內聯級和表格單元格（ 源 ）。

vertical-align的初始值是baseline 。 這意味着內聯級元素垂直定位以實現基線（文本）對齊。

底線

基線是大多數字母所在的線和下方延伸的線。

^{來源： Wikipedia.org}

這是您當前的代碼結構，包含您添加的文本：

 .userImg { display: inline-flex; height: 3em; width: 3em; background: red; } .nameOfUser { display: inline-flex; height: 3em; width: 10em; background: aqua; } 

 <div class="userImg"></div> <div class="nameOfUser"> <h3>Jaxon Crosmas</h3> </div> 

第二個元素向下移動，使其與第一個元素的當前基線對齊。

現在向第一個元素添加一些文本：

 .userImg { display: inline-flex; height: 3em; width: 3em; background: red; } .nameOfUser { display: inline-flex; height: 3em; width: 10em; background: aqua; } 

 <div class = "userImg">text</div> <div class = "nameOfUser"> <h3>Jaxon Crosmas</h3> </div> 

注意基線如何轉移到對齊。

元素仍未正確對齊，因為h3具有默認的垂直邊距。 如果刪除邊距：

 .userImg { display: inline-flex; height: 3em; width: 3em; background: red; } .nameOfUser { display: inline-flex; height: 3em; width: 10em; background: aqua; } h3 { margin: 0; } 

 <div class = "userImg">text</div> <div class = "nameOfUser"> <h3>Jaxon Crosmas</h3> </div> 

---

這是兩個快速解決方案 ：

1.使用任何其他值覆蓋vertical-align的默認值。

 .userImg { display: inline-flex; height: 3em; width: 3em; background: red; } .nameOfUser { display: inline-flex; height: 3em; width: 10em; background: aqua; } div { vertical-align: top; } 

 <div class = "userImg"></div> <div class = "nameOfUser"> <h3>Jaxon Crosmas</h3> </div> 

2.使父級成為彈性容器。

這會使您的元素變為項目，這會激活vertical-align因為彈性項目是塊級元素 。

此方法還將行中的元素排成一行，因為flex容器的初始設置是flex-direction: row 。

 .userImg { height: 3em; width: 3em; background: red; } .nameOfUser { height: 3em; width: 10em; background: aqua; } body { display: flex; } 

 <div class = "userImg"></div> <div class = "nameOfUser"> <h3>Jaxon Crosmas</h3> </div>