前端问题记录

最新推荐文章于 2021-12-27 11:16:18 发布

一念流转

最新推荐文章于 2021-12-27 11:16:18 发布

阅读量153

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35334269/article/details/106269930

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
问题描述： 我设置图片标签的高度为60px，它的父元素没有设置高度，但是表现出来的父元素高度为64px，效果如上图，红色的像素就是多出来的4像素。怎么让它的父元素表现为60px呢？经过我不断的思考和尝试，我得到了两个方法。

解决方式：

直接修改父元素的高度为60px。

.icon{
   flex: 0 0 60px;
   background-color: red;
   height: 60px;
}

修改图片标签的显示模式为block，它默认是inline。

.icon img{
   display: block;
}

源测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}

.item{
    width: 500px;
    border: 1px solid #000;
    box-sizing: border-box;
    display: flex;
}
.icon{
    flex: 0 0 60px;
    background-color: red;
}
.text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.name{
    background-color: green;
}
.desc{
    background-color: blue;
}
</style>
<body>
<div class="item">
    <div class="icon">
        <img src="image-loading.jpg" alt="" width="60" height="60">
    </div>
    <div class="text">
        <div class="name">this is a name</div>
        <div class="desc">this is a desc</div>
    </div>
</div>
</body>

<script>
</script>
</html>