在HTML中，一个li元素的高度受到font-size、line-height和内边距的影响。当设置font-size为48px时，由于span元素的实际高度超过了li的预期高度50px，导致边框溢出。这可能是由于line-height和内边距的组合效果。检查显示span高度为57px，额外的7px可能源于line-height的计算。理解这些样式属性之间的交互对于精确布局至关重要。
我很难理解font-size在以下html代码段中是如何工作的：
.container {
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
margin: 0;
padding: 0;
background: blue;
height: 50px;
line-height: 50px;
color: white;
}
ul li span {
border: 1px solid red;
margin: 0;
padding: 0;
}
#test1 li {
font-size: 48px;
}
#test2 li {
font-size: 42px;
}
- Test
- Test
我希望我的li元素正好是50像素高,我希望文本/跨度在其中垂直居中.一切都是垂直的,但是当我使用2px红色边框将font-size设置为48px时,边框会被推到li元素之外.几乎看起来应用了隐形填充/边距.
当我检查Chrome中的span元素时,它显示span元素的实际高度为57px.额外的7px来自哪里？
扫一扫
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
