本文摘自PHP中文网，作者云罗郡主，侵删。
元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助。 常规的操作表现是为一个块级元素设置height属性，则其拥有了高度：1 2 3 4 5 6 7 8 9 10 | <style>
.test {
border: 1px solid #ccc;
height: 100px;
width: 100px;
}
</style>
<body>
<div class="test"></div>
</body>
|
但是根据熟知，当我们不为元素设置height，而元素中有内容时，该元素依然获取到了高度：
1 2 3 4 5 6 7 8 9 | <style>
.test {
border: 1px solid #ccc;
width: 100px;
}
</style>
<body>
<div class="test">1</div>
</body>
|
为什么div获取到了高度，并不是由于文字撑起了高度，而是line-height撑起了div，比较一下两端代码
阅读剩余部分
相关阅读 >>
css h1不占一行怎么办
css怎么设置全屏背景图片
纯css实现加号一个的效果（代码示例）
css flex 的用途详解
css中width有啥属性？
css书写顺序需要注意哪些？
css中grid布局和表格有什么区别
less.js 输出css怎么查看
css怎么让两个背景重合
css font控制字体的多种变换
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS中line-height详解（代码实例）
