<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的时候正好是整个父元素时所用到的切换。
总结:字体其实是自带四条线,顶框,中线,底线,底框。
变为行内块以后,顶框和底框的存在也给隐藏起来了。