為什麼當我們將兩個具有display inline-block和box-sizing: border-box屬性的div放在一起時,邊框不同的情況下會出現白色空白區域呢?
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
496

請考慮這段程式碼,為什麼 d3 和 d4 沒有對齊? d4 頂部的空白是什麼?

.myContainer { display: block; } #d3 { width: 150px; height: 150px; border: 5px solid #aef704; padding: 25px; background-color: blueviolet; box-sizing: border-box; display: inline-block; } #d4 { width: 150px; height: 150px; border: 2px solid #aef704; padding: 25px; background-color: brown; box-sizing: border-box; display: inline-block; }
  
test content d3
test content d4

這 2 個 div 都應該呈現內聯區塊,並且應該具有 150px 寬度和 150px 高度,那麼為什麼第二個 div 比第一個要低一點。 這是呈現的內容:

P粉373596828
P粉373596828

全部回覆 (1)
P粉803527801

因為內聯的預設垂直對齊元素是基線。透過將其設為類似 top 的值來輕鬆變更它。

.myContainer { display: block; } #d3 { width: 150px; height: 150px; border: 5px solid #aef704; padding: 25px; background-color: blueviolet; box-sizing: border-box; display: inline-block; } #d4 { width: 150px; height: 150px; border: 2px solid #aef704; padding: 25px; background-color: brown; box-sizing: border-box; display: inline-block; } #d3, #d4 { vertical-align: top; }
test content d3
test content d4
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!