【问题标题】:What is the blank part of my layout?我的布局的空白部分是什么?
【发布时间】:2016-09-27 09:34:00
【问题描述】:

#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>

请点击“运行代码sn-p”按钮查看结果。您可以在图像的底部看到,有一个空白部分。这是哪里来的?

【问题讨论】:

标签: html css image


【解决方案1】:

因为img是内联元素,所以设置为display:block或者默认为vertical-align:baseline,可以设置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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-04-27
    • 1970-01-01
    • 1970-01-01
    • 2017-07-06
    • 2023-03-22
    • 1970-01-01
    • 2021-12-01
    相关资源
    最近更新 更多