现象

 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. python之字符串split和rsplit的方法

    1.描述 split()方法通过指定分隔符对字符串进行切片,如果参数num有指定值,则分隔num+1个子字符串,默认分隔符为所有空字符,包括空格.换行(\n).制表符(\t)等 rstrip()方法通 ...

  2. spring再学习之AOP事务

    spring中的事务 spring怎么操作事务的: 事务的转播行为: 事务代码转账操作如下: 接口: public interface AccountDao { //加钱 void addMoney( ...

  3. Linux系统诊断必备技能之三：查看信息系统常用命令

    一.概述 Linux操作系统的学习中,CLI下进行操作,需要掌握大量命令,Linux的命令有很多,对于命令的学习大家记住只能是熟能生巧,所以现在把日常使用命令为大家罗列一部分,仅供参考. 二.常用命令 ...

  4. PicGo：搭建图床

    PicGo:搭建图床 PicGo 免费搭建个人图床工具PicGo: 支持Windows.MacOS 和 Linux 软件目前覆盖的图床有8个平台: SM.MS图床.腾讯云COS.GitHub图床.七牛 ...

  5. μC/OS-III---I笔记6---互斥信号量

    互斥信号量 操作系统中利用信号量解决进程间的同步和互斥(互斥信号量)的问题,在多道程序环境下,操作系统就是遮掩实现进程之间的同步和互斥.但是在使用的过程中厉害的前辈还是发现了这一优秀机制的缺陷,它会导 ...

  6. TestNG学习-依赖

    背景: 有时,需要按特定顺序调用测试方法.例如: 在运行更多测试方法之前,请确保一定数量的测试方法已经完成并成功. 在希望将初始化的方法也用作测试方法的同时初始化测试项目. TestNG允许使用注解或 ...

  7. 2021-2-18：请你说说MySQL的字符集与排序规则对开发有哪些影响？

    任何计算机存储数据,都需要字符集,因为计算机存储的数据其实都是二进制编码,将一个个字符,映射到对应的二进制编码的这个映射就是字符编码(字符集).这些字符如何排序呢?决定字符排序的规则就是排序规则. 查 ...

  8. Nuxt.js SSR Optimizing Tips

    Nuxt.js SSR Optimizing Tips 性能优化 FP 首次绘制时间 FCP 首次渲染时间 FMP 首屏渲染时间 FI refs https://vueschool.io/articl ...

  9. vue & components & props & methods & callback

    vue & components & props & methods & callback demo solution 1 & props & data ...

  10. stackoverflow & xgqfrms

    stackoverflow & xgqfrms stackoverflow https://stackoverflow.com/users/5934465/xgqfrms https://st ...