<li>嵌套<img>遇到的问题

提问：只设置了《img》的高度为什么《li》的高度要大于img(img下面有红边),请问原因是什么，除了设置《li》的高度以外，还有别的解决办法吗，谢谢解答

)


```css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        ul {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        li {
            list-style-type: none;
            background-color: red;
        }
         
        img {
            width: 56px;
            height: 56px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="./img/1：1/th_1.jpg" alt=""></li>
            <li><img src="./img/1：1/th_2.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

```

解决方案（任选一种）：

div设置 font-size：0；
img设置 display：block；
div设置 display：flex；
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.

img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符，所以就会变高
————————————————
我之前也遇到过这个问题

给li加一个 font-size: 0;

在这个示例中，li元素的高度大于img元素的高度是因为ul元素的高度被设置为100%，而li元素没有设置具体的高度。这意味着li元素的高度将自动扩展以填充ul元素的高度。

解决这个问题的一种方法是给li元素设置具体的高度，例如：

li {
    list-style-type: none;
    background-color: red;
    height: 56px;  /* 设置和img元素相同的高度 */
}

这样li元素的高度将和img元素的高度相同。

另外，你还可以使用其他的布局方法来解决这个问题，例如使用flex布局。

ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;  /* 垂直居中对齐 */
    height: 100%;
}

这样ul元素将使用flex布局，使得li元素垂直居中对齐，并且li元素和img元素的高度相同。

【以下回答由 GPT 生成】

问题的原因是，图片在嵌套的

标签中，并且没有设置垂直对齐方式，导致标签的默认垂直对齐方式为baseline，而baseline会使得父级的
标签的高度计算包括了图片下方的部分空白间距。

解决该问题的方法有两种：

设置
标签的高度为和一样的高度。这样可以保证
的高度和的高度一致，解决了高度不一致的问题。代码如下：

li {
  height: 56px;
}

将标签的垂直对齐方式设置为top或middle，使其对齐方式不会影响父级
标签的高度计算。代码如下：

img {
  vertical-align: top; /* 或者是 vertical-align: middle; */
}

以上就是两种解决该问题的方法，你可以根据具体情况选择其中一种解决方案来解决该问题。

【相关推荐】

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/719632
这篇博客你也可以参考下：解决img和div高度不同的问题（img额外产生的高度）

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^