<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size:14px;}
.block{width:100%;background-color:red;}
.a{display: table;width:100%;height:100%;}
.b{display: table-cell;vertical-align: middle;}
.c{display:inline-block;background-color:yellow;width:100px;height:8px;}
</style>
</head>
<body>
<p class="block">
<p class="a">
<p class="b">
<p class="c"></p>
</p>
</p>
</p>
</body>
</html>如上代码,有两个问题想请问一下:
1.当.c的height为0的时候,为什么.b会有14的高度?
2.当.c的height不为0的时候,为什么距底边有间隙?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The reason for font-size, when the height of .c is 0, set the font-size of .b to 0
Both inline and inline-block will have this problem. The possible reason is that these two attributes will parse the spaces before and after, or parse them into characters. The solution is to set the font-size of .b to 0. Or replace the inline-block attribute of .c with the block attribute