html - 我的布局的空白部分是什么？

Question

#container {
    width: 250px;
    margin: 0 auto;
}

.group {
    border: 1px solid grey;
    margin-bottom: 20px;
}

.group p {
    text-align: center;
    font-family: Helvetica sans-serif;
    font-size: 25px;
    color: #2e3d49;
}

.group img{
    width: 100%;
}

<div id="container">
  <div class="group">
    <p>Hello World</p>
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
  </div>
</div>

请点击“运行代码片段”按钮查看结果。你可以看到在图像的底部，有一个空白部分。这是从哪里来的？

Answer 1

因为 img 是一个内联元素，所以设置为 display:block 或者因为它默认是 vertical-align:baseline，可以设置set vertical-align:bottom

#container {
  width: 250px;
  margin: 0 auto;
}
.group {
  border: 1px solid grey;
  margin-bottom: 20px;
}
.group p {
  text-align: center;
  font-family: Helvetica sans-serif;
  font-size: 25px;
  color: #2e3d49;
}
.group img {
  width: 100%;
  display: block;
  /* vertical-align: bottom  - would work as well */
}

<div id="container">
  <div class="group">
    <p>Hello World</p>
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">
  </div>
</div>