首页 > > 网页制作 > css >

line-height与图片底部间隙的学习整理转述

2018-06-24 01:01:22来源：未知阅读 ()

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

看大牛张鑫旭的视屏可能会理解的更深一些，点击这里；

line-height，两行文字的基线之间的距离；

基线，英语本子中就有，顶线，中线，基线，底线；

行内框盒子模型：

内容区域（content area），一个围绕文字的看不到的盒子，相当于鼠标选i中时的区域，只和font-size、font-family有关；
内联盒子（inline boxes），不会让内容成块显示，而是排成一行（inline），如果只是文字，就是匿名内联盒子，如span;
行框盒子（line boxes），每一行都是一个行框盒子，由内联盒子组成，如果换行，那就是两个行框盒子；
包含盒子（containing box），由行框盒子组成，如p;

内联元素的高度是由行高决定的；

高度的表现不是行高，是内容区域和行间距， 行高(line-height) = 内容区域高度(content area) + 行间距(vertical spacing)；

line-height:normal;（默认值，与font-size和font-family有关）

line-height:number;（根据font-size大小计算，相乘的结果就是行高）

line-height:length;（固定值，em、rem、px）

line-height:percent;（根据font-size计算）

line-height:inherit;（继承行高，input默认的行高是normal）

阅读类网站行高一般设置1.5就好了；网站开发匹配20px（20/font-size）;

body{font-size:14px; line-height:1.4286}

图片底部间隙

　　图文混排的情况下，inline元素在默认情况下的vertial-align是baseline（基线）对齐的，这时容器高度 = 文字行高 - 基线位置高度 + inline元素高度，所以图片下边会有一段间隙；

　　消除底部间隙的方法：

改变图片元素类型，vertical-align只对inline和inline-block元素有效，图片设置display:block之后就不受影响了；
图片设置底线对齐，vertical-align：bottom；
父容器行高足够小，基线上移，父容器设置line-height：0或者font-size：0；

　　代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 300px;
                background: #0ff;
                margin: 100px;
                line-height: 0;
                /*font-size: 0;也可以哦，0*0=0 */
            }
            .wrapper img{
                width: 150px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img src="images/1.jpg"/>
        </div>
    </body>
</html>