CSS中line-height详解(代码实例)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS中line-height详解(代码实例),小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1351字,纯文字阅读大概需要2分钟。
内容图文
![CSS中line-height详解(代码实例)](/upload/InfoBanner/zyjiaocheng/411/76b5143fddd640928f1fd73fc6217563.jpg)
<style> .test { border: 1px solid #ccc; height: 100px; width: 100px; } </style> <body> <div class="test"></div> </body>
但是根据熟知,当我们不为元素设置height,而元素中有内容时,该元素依然获取到了高度:
<style> .test { border: 1px solid #ccc; width: 100px; } </style> <body> <div class="test">1</div> </body>
为什么div获取到了高度,并不是由于文字撑起了高度,而是line-height撑起了div,比较一下两端代码
.test { border: 1px solid #ccc; width: 100px; line-height: 100px; } </style> <body> <div class="test">1</div> </body>
效果如下:
.test { border: 1px solid #ccc; width: 100px; line-height: 0; } </style> <body> <div class="test">1</div> </body>
显而易见的结果就是因为有了height所以有高度,没有height则因为有了line-height而有了高度 更多详细的细节其实是因为 每一行文字 都有一个line boxes, 这些一个个盒子自然撑起了父元素的高度。
同时,观察上面的例子就能发现文字的中线和line-height的中线是在相同位置的,所以才有了常用的那套居中办法:
<style> .test { line-height: 100px; height: 100px; } </style>
设置line-height和height相同数值则可以使得其中文字垂直居中
从结果来看确实如此,但是这句话不对,这句话多余了几个字,完全不需要设置height,只需要line-height就可以做到文字垂直居中了。
以上就是CSS中line-height详解(代码实例)的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS中line-height详解(代码实例)全部内容,希望文章能够帮你解决CSS中line-height详解(代码实例)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。