简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
為什麼當我們將兩個具有display inline-block和box-sizing: border-box屬性的div放在一起時，邊框不同的情況下會出現白色空白區域呢？
P粉373596828
P粉373596828 2023-09-13 13:45:36
0
1
500

請考慮這段程式碼，為什麼 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;
}
<html lang="en">

<head>
</head>

<body>
  <div class="myContainer">
    <div id="d3">test content d3</div>
    <div id="d4">test content d4</div>
  </div>
</body>

</html>

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

P粉373596828
P粉373596828

全部回覆(1)
P粉803527801
P粉8035278012023-09-14 00:15:09 1樓

因為內聯的預設垂直對齊元素是基線。透過將其設為類似 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;
}
<div class="myContainer">
  <div id="d3">test content d3</div>
  <div id="d4">test content d4</div>
</div>
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！