CSS学习笔记－图片img与父元素div之间的间隙解决

Chiclaim 发布于2019-08-30 12:44 / 3041人阅读

摘要：前言之前在写网页的时候有一个展示图片的需求我使用一个包裹一个但是在浏览器中预览的时候碰到了一下的问题仔细看图片和之间有间隙。正文指定了行内元素或表格单元格元素的垂直对齐方式摘录自。设置父元素字体大小为所用的值是无单位数值乘以元素的。

前言

之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,

仔细看,图片和div之间有间隙。
下面贴上简易的代码

.content{
    float:left;
    margin:100px auto; 
    background:pink;
}

我外层容器content设置浮动,按浮动元素会收缩的原理,本不应该出现这条粉色的间隙,但为什么这里会有呢？之后去网上查了一下,其中涉及到了line-height以及vertical-align的问题。

正文

vertical-align

vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式(摘录自MDN)。

vertical-align的取值中有top、middle、baseline、bottom四个值,他们分别对应了

vertical-align中默认值是baseline也就是说图片的下边缘其实是和蓝色那条线对齐的,而文字元素本身也有高度,所以会多出那么一部分空白的地方，也就是底部绿色线到蓝色线之间的距离。

那么为什么在没有文字的情况下图片也会有底部的间隙,那是因为在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点(摘录自张鑫旭的博客),所以默认vertical-align为baseline的图片会和父div之间存在空隙。

知道这一点，现在问题就好解决了，最直接的可以是

设置img标签的vertical-align

img{
    vertical-align:bottom;//middle和top也都可以
}

设置img标签display:block

前面正文的开头说过vertical-align是设置行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式,所以设置img为块级元素时就不会存在baseline对齐的问题了。

img{
    display:block
}

设置父元素div字体大小为0

.content{
    float:left;
    margin:100px auto; 
    background:pink;
    font-size:0px;
}

The used value is this unitless [
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number) multiplied by the element"s font size. The computed value is the same as the specified
. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.
**所用的值是无单位数值[
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number)乘以元素的font size。计算出来的值与使用数值指定的一样。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。** (摘录自MDN)

line-height在不设置单位时是通过与font-size相乘来计算的,设置font-size为0,line-height也为0,而那一端多余的间隙(baseline和bottom之间的差值)也和line-height有关，所以自然而然间隙就消除了。

结尾

这是我解决img与父div空隙中的一点总结,其实深挖了line-height和vertical-align还有更多的内容,我一下子消化不过来,今天先到这里,日后有更深入了解了再慢慢补充,以上内容有错误的地方欢迎小伙伴们来拍砖。

GPU云服务器云服务器图片元素img css的div div添加元素的js js 获取img的图片数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115020.html

理解 line-height 和 vertical-align

摘要：我认为应该将理解为。如果的值是，高度就是等于。中所有的最高点以及最低点决定了它的高度该计算包括了的高度，后文会提到。非替换元素的的，以及并不会影响高度的计算。并不是两条之间的距离。元素的垂直中点位置与父元素的基线加上一半的位置对齐。文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有错误，请各位能够指出。几个概念 ...

jzzlee 2019-08-30 15:55 评论0 收藏0
理解 line-height 和 vertical-align

摘要：我认为应该将理解为。如果的值是，高度就是等于。中所有的最高点以及最低点决定了它的高度该计算包括了的高度，后文会提到。非替换元素的的，以及并不会影响高度的计算。并不是两条之间的距离。元素的垂直中点位置与父元素的基线加上一半的位置对齐。文章 GitHub 地址：https://github.com/afishhhhh/blog/issues/4文章如有错误，请各位能够指出。几个概念 ...

junfeng777 2019-08-02 13:57 评论0 收藏0
CSS学习笔记

CSS学习笔记在学习CSS的过程中做的一些记录，用于未来的快速回忆。 HTML常见元素和理解 head中的元素指定字符集 meta name=viewport content=...定义视图大小与设备屏幕大小的比例，用户是否可缩放指定基准路径 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 评论0 收藏0