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

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

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

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="data:images/1.jpg"/></div></body>
</html>

View Code

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

html css 图片底部空,HTML学习 | 图片底部透明css实现
[摘要]今天想到可以给小伙伴们一个示范,做网页开发需要一点点的经验积累,持之以恒,你的收将是巨大的!本次主要讲的是实现图片下方透明文字,如下图:实现这样一个效果是很简单的. 今天想到可以给小伙伴们一个 ...
解决图片底部间隙对齐问题就用vertical-align
项目中vertical-aligin可以帮你解决的问题文本框和表单按钮无法对齐问题 input和图片无法对齐问题 div中的文本框,不能贴顶问题 div不设置高度由img撑开然后img底部有间隙问题 ...
z-index的学习整理转述
前言:这是笔者第一次写博客,主要是学习之后自己的理解.如果有错误或者疑问的地方,请大家指正,我会持续更新! z-index属性描述元素的堆叠顺序(层级),意思是A元素可以覆盖B元素,但是B元素并没有消 ...
java在图片下方写文字_Java画图给图片底部添加文字标题
Java画图给图片底部添加文字标题需求给图片底部添加文字编号 import java.awt.Color; import java.awt.Font; import java.awt.Graphi ...
Android之点击图片底部出现灰色圆圈效果
1 需求点击图片底部出现灰色圆圈效果 2 代码实现 1.num_oval_gray_def.xml <?xml version="1.0" encoding="u ...
解决img图片底部留白问题
解决页面img图片底部有空白区域平时插入图片经常会遇到这种底部会有空白区域的问题,并不是img高度设置的问题, 因为"img"属于行内标签,所以我们只需要设置它为块级元素,就可以 ...
JAVA 画图给图片底部添加文字标题
此文是本人2018年写的一个小功能后来不玩csdn了很多人问问题我都没看到,对不住了各位!!! 建议直接使用image-combiner功能强大 https://gitee.com/dromara ...
图片底部圆弧（border-radius的各种形状）
1.图片底部圆弧直接看代码:里面有注释: <!DOCTYPE HTML> <html lang="en-US"><head><meta ...
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法
去掉img图片底部的空白的3种通用方法效果如图: 图片下方有莫名的空白,总是去不掉! 空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系. 因此,基于此原因有一下解决方法 ...

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

图片底部间隙

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

最新文章

热门文章