CSS行高——line-height

最新推荐文章于 2022-09-24 10:32:27 发布

深沉的简单

最新推荐文章于 2022-09-24 10:32:27 发布

阅读量517

点赞数 1

分类专栏： css3 文章标签： CSS行高line-height

本文链接：https://blog.csdn.net/u013861109/article/details/52895130

版权

本文介绍了CSS中的行高line-height概念，包括顶线、中线、基线、底线的基本知识，行高、行距与半行距的区别，以及内容区、行内框、行框的解析。详细讨论了line-height属性的定义、可能的值及其在div文字垂直居中、元素行高影响和继承行为中的应用。

摘要由CSDN通过智能技术生成

初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。

所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：

顶线、中线、基线、底线

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            span
            {
    
                padding:0px;
                line-height:1.5;
            }
        </style>
    </head>
    <body>
        <div class="test">
            <div style="background-color:#ccc;">
                <span style="font-size:3em;background-color:#999;">中文English</span>
                <span style="font-size:3em;background-color:#999;">English中文</span>
            </div>
        </div>
    </body>
<html>