行高和垂直对齐

行高和垂直对齐(行级元素在行盒内的摆放)

    <!--reference-->笔记整理自 学堂在线的刘强老师的视频教学 课程十分清晰、课件简明且附件可以自由下载 超赞！适合初学者也适合有开发者查漏补缺 Web前端攻城狮(2021春) line box Font Metrics

    

    

    行高和垂直对齐是两个不同的CSS属性，但它们经常一起使用以在行级元素周围提供对齐控制。
    
    ### 行高
    
    行高是元素的行高。它决定了元素中内容的垂直间距。行高可以通过使用`line-height`CSS属性设置。
    
    行高的默认值是正常，这大约是元素字体大小的1.2倍。您可以通过使用不同的单位来设置行高，例如像素、em或百分比。
    
    例如，以下CSS将把元素的行高设置为2em：
    ```css
    element {
    line-height: 2em;
    }
    ```
    
    ### 垂直对齐
    
    垂直对齐是元素在行中或行之间的对齐方式。它决定了元素的内容如何相对于其他元素对齐。垂直对齐可以通过使用`vertical-align`CSS属性设置。
    
    `vertical-align`属性有几个不同的值，包括：
    
    * `baseline`：将元素的内容与父元素的基线对齐。这是默认值。
    * `middle`：将元素的内容与父元素的中间对齐。
    * `top`：将元素的内容与父元素的顶部对齐。
    * `bottom`：将元素的内容与父元素的底部对齐。
    
    例如，以下CSS将把元素的内容与父元素的中间对齐：
    ```css
    element {
    vertical-align: middle;
    }
    ```
    
    ### 结论
    
    行高和垂直对齐是两个重要的CSS属性，用于在行级元素周围提供对齐控制。您可以使用这些属性来创建美观且易于阅读的布局。