解决HTML中div比其所包含的img高度高的问题

布满荆棘的人生 2023-03-02 05:06 6阅读 0赞

### 代码 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          *{
            padding: 0;
            margin: 0;
          }
          .wrap{
            border: 1px solid black;
          }
          img{
            border: 1px solid red;
          }
        </style>
      </head>
      <body>
        <div class="wrap">
          <img src="xxx" alt="">
        </div>
      </body>
    </html>

### 效果： ###

![20200727200245590.png][]

--------------------

### 解决方案（任选一种）： ###

1. div设置 font-size：0；

2. img设置 display：block；

3. div设置 display：flex；

4. img设置 vertical-align: middle;

### 原因： ###

> The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: **Images are inline elements, and inline elements have descenders.**
> 
> [链接][Link 1]

img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会变高

[20200727200245590.png]: /images/20230208/616f9510dddd4f5cae9c8c2beb44f43c.png
[Link 1]: https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 DiV中的img标签间隙的解决方法

方法一，将img的css属性改为display：block这样img被视为块及元素，但是排版的时候回垂直排列（因为块及元素占一行的大小）；方法二，将img的

╰+攻爆jí腚メ/ 2023年06月15日 04:51/ 0 赞/ 67 阅读

相关解决HTML中div比其所包含的img高度高的问题

代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

布满荆棘的人生/ 2023年03月02日 05:06/ 0 赞/ 7 阅读

相关解决html里a标签嵌套img标签存在上下高度空白问题

解决html里a标签嵌套img标签存在上下高度空白问题先上代码实际中遇到的情况：a标签存在一个高度把img 标签挤出div ![在这里插入图片描述][wat

淩亂°似流年/ 2022年11月17日 14:50/ 0 赞/ 199 阅读

相关 html同行div不同宽高,html - 如何在流体div中并排显示具有相同高度的两个不同高度/宽度比的图像，它们覆盖窗口宽度的百分比？ - 堆栈内存溢出...

一起乞讨乞讨和偷窃，我得到了这个工作示例： Stackoverflow Question .aspectwrapper \{ display: inline-block

柔光的暖阳◎/ 2022年10月06日 11:59/ 0 赞/ 99 阅读

相关 html div自动高度,能否利用css自动计算一个div的高度？

1、背景说明：开发一个手机页面，页面很简单，结构如下图所示，上面是一个图片，下面是页面的内容，要求是图片横向为100%屏幕宽度，并且比例保持不变，所以我只设置了图片的宽度，

￡神魔★判官ぃ/ 2022年10月05日 15:54/ 0 赞/ 335 阅读

相关 html 父元素自动获取高度,html – 使子div与自动高度父div一样高

我有一个包装元素,包含两个浮动元素contentArea和侧边栏. contentArea具有最多内容,因此确定包装元素的高度.我希望侧边栏也能触及包装div的底边.我怎么做.

Myth丶恋晨/ 2022年10月05日 13:52/ 0 赞/ 256 阅读

相关 html div标签自动宽高,css可以设置div的宽度和高度吗？

css可以设置div的宽度和高度吗？答案是：可以。在CSS中可以使用width属性和height属性来设置div的宽度和高度。下面本篇文章就来给大家介绍一下width属性和he

ゞ浴缸里的玫瑰/ 2022年10月05日 11:59/ 0 赞/ 276 阅读

相关 HTML 解决父DIV高度塌陷问题

给父元素增加overflow样式, > overflow:auto; 或者 > > overflow:hidden ; 或者

向右看齐/ 2022年09月08日 03:57/ 0 赞/ 256 阅读

相关 HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案

HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案参考文章： [（1）HTML中由于DIV(块元素)浮动，导致的父元素高度塌陷问题的解决方案][1_H

一时失言乱红尘/ 2022年09月07日 01:19/ 0 赞/ 257 阅读

相关关于div中放入一个img元素导致div高度会多出3px像素的解决问题

在写代码的时候经常遇到这样一个问题，如果div里嵌套一个img元素且div的高度是由img的高度来撑开，那么div的高度总会比img的高度多3px。好了，废话不多说，直接给大家

桃扇骨/ 2022年05月28日 02:27/ 0 赞/ 185 阅读