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

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

新老客户大回馈,云服务器低至5折

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

 

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

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>
View Code

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angularJS constant和value

下一篇:Flex 布局:语法篇