为什么图片img下方会出现一行空白？

我们在使用inline或inline-block做img图片对齐的时候，通常会发现图片下方有一行空白，这样的空白直接影响我们的显示效果，那么为什么会出现那样的空白呢？

可以看到上图，图片底部就是基线位置，蓝色的线就是底线位置，这是由于行内元素的vertical-align的对齐方式默认为baseline。图片和单词是两个行内元素，如果想上下居中对齐，需要对图片和单词都设置vertical-align:middle样式。

图片元素特殊，没有内容文字，这样基线的位置就定义在了图片的底部，以基线对齐就会出现被底线顶出去的一部分空白，这部分空白的大小取决于行内最大文字的大小，也就是基线到底线的距离。

如何去掉图片底部的空白？

可以设置图片为块级元素，也就是display:block;
在图片元素同级的元素没有文字的时候，可以将图片的父元素的font-size设置为0。
有文字的时候，可以将图片的父元素的line-height设置为0，破坏对齐。
也可以设置图片的float值，隐式的将图片改变成块级元素，破坏行内对齐方式。

了解文字书写的四条线

行高、行距与半行距

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

为什么图片img下方会出现一行空白？相关推荐

html图片下方会有一像素,div里嵌套了img底部会有白块问题和图片一像素问题解决 - Macchiato...
div里嵌套了img底部会有白块因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的"小尾巴"和图片下方的空白一样高. ...
如何清除图片下方出现几像素的空白间隙？
周末在重构页面的时候发现一个img下方会出现几像素的空白间隙,根据我自己的实践和测试一个有效的方法是,根据img图片的高度,比如为:x,那么给其父级元素也设置高度为:x.此时间隙消失: 还看到飘零雾 ...
html怎样去除顶部的空白,如何消除网页顶部的一行空白?
昨天群里一朋友询问网页顶部一行空白无法去除的解决办法.常见的解决办法均不能解决问题.深入研究了下,总结几点以加强记忆. 一.没有正确使用margin设置边距,margin指的是空白长度,用于控制容器中 ...
图片下方出现几像素的空白间隙
1.如何定义高度很小的容器? 在IE6下无法定义小高度的容器,是因为有一个默认的行高. 列举2种解决方案:overflow:hidden | line-height:0 2.图片下方出现几像素的空白间 ...
html5几张图片怎么并排一行_html5 图片与文字中间对齐处于同一行、或者图片与按钮处于同一行...
在日常开发中,经常会使用到图片与文字或图片与按钮对齐. 1.图片与按钮处于同一行,并居中对齐,长使用的方法如下: 按钮使用属性 vertical-algin:middle 使元素的基线与父元素 ...
html文字于图片齐平,CSS控制图片和文字在同一行对齐显示
图片与文字是做网站必不可少的要素,我们在使用图片与文字布局时,如何让图片和文字在同一行对齐显示来制作出一个整齐的网页出来. 对于一些学做网站新手来说,图片和文字在同一行对齐显示却不是一件容易的事情,这 ...
antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种 ...
Form表单提交按钮图片IE6下背景透明（js提交）
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...

为什么图片img下方会出现一行空白？

如何去掉图片底部的空白？

了解文字书写的四条线

行高、行距与半行距

为什么图片img下方会出现一行空白？相关推荐

最新文章

热门文章