极客观点
项目管理
HarmonyOS
高度塌陷问题中，父级元素（d1）包含2个子级元素（d2,d3），d2设置浮动后，
为了解决塌陷的问题，采用了方法之一，再添加一个元素d3，这样解决了塌陷问题。
但是突然又想让这个d3显示出来，然后采用了开启BFC方法之一的，display:inline-block，确实d3显示出来了，
但有引发了另一个问题，d1的content多出了4px，请问一下，这个4px是哪里多出来的？
chrome,firefox，explorer中都出现了这个问题……
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
这是因为display：inline-block后 ，元素就会默认 vertical-ａｌｉｇｎ：ｂａｓｅｌｉｎｅ
如果各＃ｄ３ 添加