CODEWITHSUNDEEP
htmlcssimage
JasmineOT
JasmineOT

Reputation: 2078

What is the blank part of my layout?

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

Upvotes: 0

Views: 60

Answers (1)

dippas
dippas

Reputation: 60603

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>

Upvotes: 2

Related Questions