现象

 bug: 图片在div\li\dt 等  图片把父元素向下撑大大约3px
 <style>
        img {
            width: 30%; //这里由于图片过大，等比缩放30%
        }
        div {
            background-color: red;
        }
    </style>
<body>
    <div>
        <img src="./images/2.jpg" alt="">
    </div>
    <img src="./images/3.jpg" alt="">
</body>
产生现象

产生原因

  img是一种类似text的标签元素，会在末尾加上一个空白符（匿名文本），这个文本外有一个匿名行级盒子，它默认的vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开3px。

解决方法

　　1、给父元素添加 font-size:0;或line-height:0;

　　2、元素img添加：  vertical-align: middle/top/bottom;

　　 3、子元素img添加： float：；，父元素添加overflow:hidden;目的解决父元素高度塌陷（也可以用其他方式解决）

　　 4、子元素img添加：display: block;，当然也可以是flex，table-cell等。最常用的是block

　　5、子元素img添加： margin-top: -3px;

解决图片把父元素向下撑大大约3px问题的更多相关文章

  1. ss 如何解决margin-top使父元素margin失效

    给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...

  2. 图片在父元素中上下居中(vertical-align的有效性)

    在实际的使用中,会遇到img上下居中的问题: 1.一般情况下,将其放置在table中:可以自动的上下居中.   2.另外一种情况<即一般情况下> 以li中为例子:在无序列表中 li元素下的 ...

  3. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  4. <转载>CSS解决图片过大撑破DIV的方法

    DIV+CSS网页内容中如果插入大于DIV层宽度显示,过大的图片将会撑破网页宽度显示从而网页严重变形,您是否遇到过?这里DIVCSS5给大家介绍几种解决图片撑破撑开网页DIV层方法. 图片撑破宽度解决 ...

  5. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  6. js 解决图片居中问题

    下述方法能够解决图片居中问题: (1)宽一些或者高一些(相对父元素的大小):图片在父元素的可视范围内显示图片的中间位置 (2)小一些(相对父元素的大小):图片在父元素的可视范围内居中显示 实现原理:根 ...

  7. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  8. 改变父元素的透明度，不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  9. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

随机推荐

  1. Docker网络模式详解

    一.Docker四种工作模式 安装Docker时,它会自动创建三个网络,bridge(创建容器默认连接到此网络). none .hosthost:容器将不会虚拟出自己的网卡,配置自己的IP等,而是使用 ...

  2. 23. 合并K个排序链表 分治

    这种k个相同的子问题,可以两两分治,总的运算次数为logk 关键部分 int dis=1; int len=lists.size(); while(dis<=len) { for(int i=0 ...

  3. 关于free和delete的使用

    上一篇篇幅太长,这里再区分free和delete的用法. 两个同时存在是有它的原因的,我们前面说过,free是函数,它只释放内存,但不会调用析构函数,如果用free去释放new申请的空间,会因为无法调 ...

  4. 『数据结构与算法』二叉查找树（BST）

    微信搜索:码农StayUp 主页地址:https://gozhuyinglong.github.io 源码分享:https://github.com/gozhuyinglong/blog-demos ...

  5. 推荐一个vuepress模板，一键快速搭建文档站

    介绍 vuepress-template是一个简单的VuePress案例模板,目的是让用户可以直接clone这个仓库,作为初始化一个VuePress网站启动项目,然后在这个项目的基础上新增自定义配置和 ...

  6. CSS 定位 relative && absolute 问题？

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  7. API 授权 All In One

    API 授权 All In One 身份验证 授权类型 身份验证类型 继承认证 没有认证 API密钥 不记名令牌 基本认证 摘要授权 OAuth 1.0 OAuth 2.0 授权码 隐含的 密码凭证 ...

  8. The Weekly Web Dev Challenge: Emoji Ratings

    The Weekly Web Dev Challenge: Emoji Ratings /* DESCRIPTION: You job is to enable users to give a rat ...

  9. Taro 框架实现原理

    Taro 框架实现原理 小程序 H5 RN Web 多端框架 Taro 1.x & Taro 2.x 编译型架构, 语法编译转换 Taro 1/2 属于编译型架构,主要通过对类 React 代 ...

  10. git config all in one

    git config git global config # git global config $ git config $ git config --list --show-origin $ gi ...