父元素默认高度
程序员文章站
2022-05-24 15:45:35
...
父元素未设置高度时，此时高度由子元素高度撑起作为父元素高度。这句话肯定是没错的但有些场景运用起来发现个问题,父元素会比子元素（ inline-block）高出几像素如下：
.box1{
border: 1px solid red;
float: left;
}
.box2{
display:inline-block;
width: 70px;
height: 70px;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
<div class="box1">
<div class="box2"></div>
</div>
即使设置行高字体都没有。不管子元素内部有没有内容，父元素总会比子元素多几像素。最后反复试验才明白，inline-block元素和图片文本性质是一样的在父元素中都会与一个匿名空白元素基线对齐，而这个基线以下的高度就是父元素大于子元素几像素的高度。
最后设置此子元素vertical-align: middle;让其中线对齐，下面的空白间隙自然消失。父元素高度和子元素高度保持一致。
推荐阅读
-
无法获取隐藏元素宽度和高度的解决方案
-
使用CSS3的appearance属性改变任何元素的浏览器默认风格
-
火狐浏览器网页打印高度不是默认高度怎么设置?
-
css和css3弹性盒模型实现元素宽度（高度）自适应
-
微信小程序中使元素占满整个屏幕高度实现方法
-
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
-
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
-
父元素的mousedown事件上父元素的mousedown事件上的offsetX和offsetY错误的offsetX和offsetY错误
-
css控制元素高度自适应
-
jquery、js调用iframe父窗口与子窗口元素的方法教程