What is the blank part of my layout?

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>

Please click the "Run code snippet" button to see the result. You can see at the bottom of the image, there is a blank part. Where does this come from?

[html, css - weird invisible margin below pictures](http://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below-pictures) — vaultah, May 29 '16 at 13:50
[Remove white space below image \[duplicate\]](http://stackoverflow.com/q/7774814/2301450) — vaultah, May 29 '16 at 13:52
[Image inside div has extra space below the image](http://stackoverflow.com/q/5804256/2301450) — vaultah, May 29 '16 at 13:52
[HTML 5 strange img always adds 3px margin at bottom](http://stackoverflow.com/q/10844205/2301450) — vaultah, May 29 '16 at 13:52

score 2 · Accepted Answer · answered May 29 '16 at 13:52

it is the img being an inline element, so set is as display:block or because it is by default vertical-align:baseline, you can set 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>

What is the blank part of my layout?

1 Answers1