div高度比包含的img元素高出3px的问题

newsning 发布于2019-08-29 15:42 / 2683人阅读

摘要：问题描述写的时候遇到了一个小问题只包含一个元素，但是页面展示上却比高出一点。因此当我们的块级元素包含这个行内元素的时候底部就出现了的间距。

问题描述

写css的时候遇到了一个小问题div只包含一个img元素，但是页面展示上div却比img高出一点。当时只觉得匪夷所思...找了半天自己样式的问题...情况如下图

//less代码
  .header-pic {
    position: relative;
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    
    img {
      width: 100%;
      background-size: cover;
    }
    .linear-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      background: rgba(51,51,51,0.10);
    }
  }

问题原因

后来查了一下资料，发现img元素后面会跟一个空白符，会使它的高度多出3px
至于为什么img元素后面会出现3px的空白呢～？因为img元素是行内元素，行内元素默认会有3px的间距。因此当我们的块级元素div包含这个行内元素的时候底部就出现了3px的间距。感谢@梦雨依依！

解决方案

设置img为display:block,空白就消失啦～～～
因为将img元素设置为块级元素，就不会存在默认间距了。
更多解决方案请参考

服务器托管云服务器 div的高度 div添加元素的js 分别建立包含10个数据元素的顺序线性表和链式线性表图片元素img

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

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

读后总结--精通css高级web标准解决方案（第二版）

摘要：无论是否移动，元素仍然占据原来的空间。绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。为啥读这本书现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要 css怎么都能写出来，但是要写的好写得快还得多读书 css魔法推荐的，读完这个读读css揭秘当然，根本原因还是觉得自己掌握不好开始总结吧~ 一. 基础知识经过上世纪没有 css的痛苦时的混沌时期，人们开始了进...

leone 2019-08-30 13:05 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
浅析RWD

摘要：三响应式网页设计的基本原理标签，允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用，选择器清除浮动，只适用于非浏览器。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。一、前言现今，无论是移动设备、平板电脑、PC，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式网页设...

0x584a 2019-08-30 12:52 评论0 收藏0
浅析RWD

摘要：三响应式网页设计的基本原理标签，允许页面宽度自动调整大多数移动浏览器将页面放大为宽的视图以符合屏幕分辨率。解决方案使用，选择器清除浮动，只适用于非浏览器。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。一、前言现今，无论是移动设备、平板电脑、PC，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式网页设...

_Dreams 2019-08-01 15:10 评论0 收藏0
再次认识 vertical-align

摘要：因为第三格的距离还是存在，也就能理解之前的有一种解决方案，如果中不存在文本，直接设置。单元格垂直居中。单元格的内边距的下边缘与行的底端对齐。 css中的基础知识，上次在刷 segmentfault 遇见了一个相关的问题有再次看过 vertical-align 的描述。今天自己也遇见一个类似的问题，再次深入学习一下。 vertical-align 用来指定行内元素（inline）或表格...

William_Sang 2019-08-30 13:11 评论0 收藏0