html - 我不知道为什么在Flexbox的图片下方没有空白

This question already has answers here:

Image inside div has extra space below the image
                                
                                    （9个答案）
                                
                        
                                2个月前关闭。
            
                    
您必须全屏查看代码段才能看到问题。如您所见，图像下方有空白空间，我不确定为什么会这样。起初我以为我的长宽比不正确，但是，摆弄图像后，即使我要增加宽度或高度，我也总是会得到相同的结果。

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
        color: rgba(0, 0, 0, 0.8);
    }
    body {
        background-color: #f1f1f1;
        font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
    }
    .wrapper {
        width: 70%;
        margin: 0 auto;
    }
    .flex {
        display: flex;
    }
    .project-info {
        flex: 1;
        padding: 30px;
    }
    .project-thumbnail {

    }
    .projects {
        padding: 40px 0 0 0;
        font-size: 1.1em;
        line-height: 30px;
    }
    .project {
        background-color: #fefefe;
        margin-bottom: 40px;
        border-radius: 4px;
        box-shadow: 0 5px 8px 0 rgba(0,0,0,.2);
    }
    .project-name {
        margin-bottom: 30px;
    }
    .project-description {
        margin-bottom: 20px;
    }
    .thumbnail {
        width: 600px;
    }

<div class='wrapper'>
<section class='projects'>
                <div class="project flex">
                    <div class="project-info">
                        <h1 class='project-name'>Test</h1>
                        <p class='project-description'>Test</p>
                        <p class='project-technologies'>Test</p>
                    </div>
                    <div class="project-thumbnail">
                        <img class='thumbnail' src="https://librarystorage.files.wordpress.com/2013/09/wall10-1000x1000px-seamless.jpg" alt="thumbnail">
                    </div>
                </div>
</section
</div>

最佳答案

您正在line-height上设置.projects，因此会影响整个块。
只需添加：

.project-thumbnail {
    line-height: 0;
}

删除图像块上的line-height。

关于html - 我不知道为什么在Flexbox的图片下方没有空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58669690/