fontsize与line-height关系

道阻且长没关系

已于 2023-02-18 17:23:21 修改

阅读量2.7k

点赞数 2

文章标签： html5 前端 html

于 2022-12-25 22:37:09 首次发布

本文链接：https://blog.csdn.net/m0_60909419/article/details/128429266

版权

首先从顶线到底线的距离就是font-size字体大小，行高 line-height = 半行距 + fontsize + 半行距，各大浏览器都有半行距，这样字排版才不会看起来很拥挤。我们的字体永远是在行高的中间，这也是盒子高度等于行高，字体会处于盒子正中间的原因。

font-size字体大小和line-height行高关系，如果字体大小等于行高，那么将没有行距，字体贴在一起。没有单位的line-height是相对于font-size的，为1就是代表line-height大小为font-size大小。

div {
    font: 12px/1 '宋体';
    或者：font: 12px/12px '宋体';
}

<div>我是中国</div>
<div>我是中国</div>

盒子高度height和line-height行高关系，如果行高大于盒子高度，字体显示在下方。反之显示在上方。

        div {
            background-color: aqua;
            font: 12px/72px '宋体';
            height: 50px;
        }

重点：行内块盒子虽然不能直接设置宽高，但是他是可以继承或者设置行高的

    .box {
        font: 20px/50px '宋体';
        height: 200px;
        background-color: aqua;
    }

    <div class="box">
        <span>我是span</span>
        <div>我是盒子的div</div>
    </div>

可以看到，虽然span的高度只有20，但他同样具有行高50px，所以和div有距离。所以有时候给行内元素换个模式inline-block显示，就能看得更清楚。

注意1：每个浏览器的字体font-family可能不同，那他的行高也会有所不同，基线位置也会有所不同。

注意2：比如有个父盒子div或者p，他是已经有默认的字体格式和字体大小16px了（除非你自己设置字体或者字体大小或者行高），又因为每一个子元素都会继承字体的属性，这意味着什么，意味着父盒子中的每一行的line-height已经确定了（除非你自己去修改父元素的字体属性），例如给父盒子p设置font-size为20px，那他的行高可能为20*1.3=26px，此时你给子元素设置其他的字体格式或者字体大小，那可能会出现这个子元素行高还没父元素高。

注意点3：对于内联元素（行内元素），padding和border增加了其background区域，但不会增加内容区域高度（甚至是line-box高度）。如图，只是背景区域变大了，但是他并不会撑起父盒子高度，多出的区域也不会影响到父盒子的兄弟。因此，你在屏幕上看到的不一定就是内容区域。margin-top和margin-bottom对内联元素不生效。

注意点4：每一行的高度是从它的子元素最高点和最低点计算。如下，把第二个子元素字体大小修改了，但是行高还是200px，这意味着他基线位置可能变化了，但是对其方式默认是基线，所以出现下图情况，这样他的行高就不再是200px了，我们也无法判断出整个盒子行高是多少了，因为基线位置不确定。

    <style>
        p {
            font-size: 100px;
            line-height: 200px;
            background-color: aqua;
        }
        span {
            display: inline-block;
        }
        .ss {
            background-color: red;
        }
        .dd {
            font-size: 50px;
            background-color: blue;
        }
    </style>

    <p>
        <span class="ss">Ba</span>
        <span class="dd">Ba</span>
    </p>

基线位置的确定以及vertical-align

一个块盒子，可以放行内元素和行内块元素，也能直接放文本，这个文本会继承块元素的fontsize和line-height，我们根据这个文本来判断基线的位置了，即使没有这个文本，也是以他来判断基线的。

vertical-align用来设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。对于img，textarea行内块元素（不包括input元素），他们没有基线，则他们默认以margin-bottom的底边对齐文本的基线。如下图，img的margin-bottom底边和文字的基线对齐。