<style>
.a{
width: 200px;
/* height: 200px; */
background-color: teal;
}
.b{
margin-top: 10px;
background-color: yellow;
display: block;
text-align:center;
/* line-height: 10px; */
}
a{
background-color: red;
text-decoration: none;
font-size: 20px;
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="a">
<div class="b"><a href="#">一x六</a></div>
</div></body>
没有切换成行内块时a 的大小
如果把a变成行内块，这图片高度是这样的。
由此：
1.在父元素没有设置line-height时，默认line-height即为子元素的font-size值。
2.子元素为行内元素时，会溢出，因为具体看盒子模型，高度要大于font-size值；切换为行内块元素时，则撑满父元素无溢出，高度正好为font-size值。这也是为什么在做超链接的时候为了使a元素hover的时候正好是整个父元素时所用到的切换。
总结：字体其实是自带四条线，顶框，中线，底线，底框。
变为行内块以后，顶框和底框的存在也给隐藏起来了。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
