图片上下之间的空隙是什么原因

先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 0 auto;
            max-width: 800px;
        }
        img{
            width: 100%;
        }
        .content{
            max-width: 800px;
            height: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="szkp-03.jpg">
    </div>
    <div class="content"></div>
</body>
</html>

图上代码会让让下产生一个空隙

而如果我在div样式上写上font-size: 0;或者在img样式上写上display: block;那么空隙就不见了求问这是什么原理

阅读 9.7k

看来《权威指南》并没有过时，在这个问题上，该书第三版第 146 页有明确说到：

如果一个垂直元素没有基线——也就是说，这是一个图像或表单输入元素，或者其它替换元素——那么该元素低端与其父元素的基线对齐。这个对齐规则很重要，因为它使得一些 web 浏览器总是把替换元素的底边放在基线上，即使该行中没有其他文本。例如，假设一个表单元格中只有一个图像。这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中，所以不会出现空白。根据CSS工作组的意见，这种加空白的行为是正确的，不过大多数创作人员都不喜欢这种做法。

先打预防针：图像属于行内替换元素！

那么我们现在回到问题本身上来，为什么图片上下之间会有缝隙呢？

要了解这个问题，首先就需要了解什么是基线。简单的说，基线就是文本行中字母"x"（小写）的底线，请看下图

图片描述

从图中明显看得出来，对于每一行说，基线下面实际上还有一部分高度，要解释这一部分高度，就需要涉及到行内框、行框和行间距等一些概念。
我们长话短说，一行文本不可能就 x 那么高，上面下面总会有些位置留给个头儿大些的文字，当然这只是简单的快捷记忆方法，实际上如果需要具体了解，请参照该书“字体”和“文本属性”章节，这里不作赘述。

上代码：

    body{
      width: 110px;
    }
    img {
      width: 60px;
      height: 60px;
    }

  <img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
  <img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">
  <img src="http://t12.baidu.com/it/u=3117210431,262031559&fm=76" alt="">

效果如下：
图片描述

因为图片底部是相对于基线对齐的，所以图片下面还留出一些空间，要解决这个问题，方法很多：

设置图片的 vertical-align: bottom;（将图像底部与行框底部对齐，行框底部就是这一行的最底部）
对图片使用 float（float的定义是元素紧挨元素，所以不会出现缝隙）
指定图片的 display: block; (垂直文本对齐属性 vertical-align 只适用于行内或者替换元素，display改变了元素的显示，实际上并不是只有block才会这样，只要不是带有inline的都不会出现缝隙，这样做的目的就是使图像成为块级元素，这样图像就不会生成行框，也就不会是相对于基线对齐，所以也不会有基线下面的缝隙)(《CSS 权威指南》第三版第203页)
指定父元素 font-size: 0; （实际上font-size并不是你看到的字体大小，而是用于设置字体的em框，它指定了如果没有额外行间距的情况下，字体基线间的距离）
指定父元素 line-height: 0; (line-height 指定了基线之间的最小距离，font-size是指定没有额外行间距时的基线距离，此处的额外行间距就是line-height来指定)

ps:上面的解决方法是我自己想出来的，还有其它我没有想到的方法，整个答案也是我个人整理的，如果有错误，欢迎指教。如果觉得有帮助，欢迎点赞。:-)

图片上下之间的空隙是什么原因

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？