鍍金池/ 問答/HTML/ 高度塌陷問題，出現(xiàn)了間隙

高度塌陷問題，出現(xiàn)了間隙

高度塌陷問題中，父級元素（d1）包含2個子級元素（d2,d3），d2設(shè)置浮動后，
為了解決塌陷的問題，采用了方法之一，再添加一個元素d3，這樣解決了塌陷問題。
但是突然又想讓這個d3顯示出來，然后采用了開啟BFC方法之一的，display:inline-block，確實d3顯示出來了，
但有引發(fā)了另一個問題，d1的content多出了4px，請問一下，這個4px是哪里多出來的？
chrome,firefox，explorer中都出現(xiàn)了這個問題……

d1紅色，d2黃色，d3藍色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 200px;
            background-color: red;
            border: 20px solid green;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
        #d3 {
            width: 200px;
            height: 200px;
            background-color: blue;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>
</html>

這是頁面顯示效果圖片描述

這是父級d1的盒子圖片描述

多出了4px

回答
編輯回答
做不到

如果要把d3顯示出來，只需要讓d3清除浮動就可以了clear:both;

2017年10月29日 01:50
編輯回答
苦妄

我有試出來一種方法：給d3添加 margin-bottom: -4px；雖然不知道為啥，但間隙也消除了。

2018年6月21日 03:55
編輯回答
北城荒

還有一種解決方式是給父元素，在這個例子里是id為d1的盒子加一個font-size:0px。
加了的話，記得有字體的地方需要設(shè)置font-size，不然會不顯示字體的。

2018年4月25日 21:23
編輯回答
愛礙唉

這個空隙是div里 inline-block之間的空格導(dǎo)致的。
消除方法有兩種
1 ：給父級一個字號=0的設(shè)置；
2 ：div標簽之間相連 不要換行跟縮進

2018年7月13日 09:20
編輯回答
熊出沒

這是因為display：inline-block后 ，元素就會默認 vertical-ａｌｉｇｎ：ｂａｓｅｌｉｎｅ
如果各＃ｄ３　添加　

 /* 添加這個不會有4像素 */
   vertical-align: top;
  /* 添加這個不會有4像素 */
  vertical-align: bottom;
  /* 添加這個會有4像素 */
 vertical-align: baseline;
 
 前面兩個中的一個就不會多４像素。
 
 下面是效果：

圖片描述

2018年7月5日 08:21