1

I am beginner and I am learning HTML and CSS. I am trying to make a webpage but I am getting a problem. The problem is I am getting an extra space in the bottom of an image.

The red mark in the image is indicating the space

enter image description here

Here is my HTML and CSS codes:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

.food-menu {
  width: 100%;
  margin: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.food-menu .item-image {
  width: 50%;
}

.food-menu .item-image img {
  width: 100%;
  display: block;
}

.food-menu .item-info {
  width: 50%;
  background-color: #F1F8F6;
  padding: 0 7rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.food-menu .item-info .title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: #1E3932;
  text-align: center;
}

.food-menu .item-info .sub-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16px;
  margin: 2.4rem 0;
  color: #1E3932;
  text-align: center;
  line-height: 33.25px;
}

.food-menu .item-info .button {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 16px;
  border-radius: 30px;
  color: #1E3932;
  font-weight: 700;
}

.food-menu .item-info .button:hover {
  background-color: #DBE5E2;
}

.order {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
}

.order .food-menu {
  display: -ms-grid;
  display: grid;
}

.order .food-menu .item-image, .order .food-menu .item-info {
  width: 100%;
}

.order .food-menu .item-info{
  background-color: #D4E9E2;
  padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="order">
        <div class="food-menu" id="item-four">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Order and pick up. Easy as that.</p>
                <p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
                <a class="button" href="#">See pickup options</a>
            </div>
        </div>
        <div class="food-menu" id="item-five">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Floating into summer like…</p>
                <p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
                <a class="button" href="#">Order now</a>
            </div>
        </div>
    </div>
</body>
</html>

I am getting extra space in id item-five at HTML line 27.

#item-five > .item-image.

Why I am getting this space?

How can I remove the space and the heights of the two divs class item-info must be equal.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Satyajit Roy
  • 517
  • 1
  • 5
  • 18
  • This is happening because of text inside your second item-info just add
    tag before your text and you are good to go     – Kenit Jul 02 '21 at 10:30
  • @Paulie_D While the title is the same, the actual problem here doesn't seem like a duplicate to me. Perhaps I am missing something but it looks more like a problem with grid/flexbox alignment. – DBS Jul 02 '21 at 10:33
  • @DBS the white space is the so called `inline decender space`. Images by default are inline level elements and palced on the base-line. However, there also is a decenetr space for letters like: y, j, g, p. As such you should use `img { display: block; }` to solve the issue. Thats also the solution for the linked question. – tacoshy Jul 02 '21 at 10:38
  • @tacoshy I understand the duplicate, however this seems like a different problem. If you take a look at the asker's example you can see they are already using `display: block` on the image. – DBS Jul 02 '21 at 10:41
  • @DBS you are right, it's due to the default align-content which is stretch by default and it need to be set as start in this case – Temani Afif Jul 02 '21 at 11:48

1 Answers1

0

Add align-content:start to your grid container, you are facing the default stretch alignment

.order .food-menu {
  display: grid;
  align-content:start
}


* {
  margin: 0;
  padding: 0;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

.food-menu {
  width: 100%;
  margin: 2rem 0;
  display: flex;
          flex-direction: row-reverse;
}

.food-menu .item-image {
  width: 50%;
}

.food-menu .item-image img {
  width: 100%;
  display: block;
}

.food-menu .item-info {
  width: 50%;
  background-color: #F1F8F6;
  padding: 0 7rem;
  display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
}

.food-menu .item-info .title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: #1E3932;
  text-align: center;
}

.food-menu .item-info .sub-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16px;
  margin: 2.4rem 0;
  color: #1E3932;
  text-align: center;
  line-height: 33.25px;
}

.food-menu .item-info .button {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 16px;
  border-radius: 30px;
  color: #1E3932;
  font-weight: 700;
}

.food-menu .item-info .button:hover {
  background-color: #DBE5E2;
}

.order {
  display: grid;
      grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
}

.order .food-menu {
  display: grid;
  align-content:start
}

.order .food-menu .item-image, .order .food-menu .item-info {
  width: 100%;
}

.order .food-menu .item-info{
  background-color: #D4E9E2;
  padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="order">
        <div class="food-menu" id="item-four">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Order and pick up. Easy as that.</p>
                <p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
                <a class="button" href="#">See pickup options</a>
            </div>
        </div>
        <div class="food-menu" id="item-five">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Floating into summer like…</p>
                <p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
                <a class="button" href="#">Order now</a>
            </div>
        </div>
    </div>
</body>
</html>

If you want to keep the overal height the same define a template row:

.order .food-menu {
  display: grid;
  grid-template-rows:auto 1fr;
}


* {
  margin: 0;
  padding: 0;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

.food-menu {
  width: 100%;
  margin: 2rem 0;
  display: flex;
          flex-direction: row-reverse;
}

.food-menu .item-image {
  width: 50%;
}

.food-menu .item-image img {
  width: 100%;
  display: block;
}

.food-menu .item-info {
  width: 50%;
  background-color: #F1F8F6;
  padding: 0 7rem;
  display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
}

.food-menu .item-info .title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.16px;
  color: #1E3932;
  text-align: center;
}

.food-menu .item-info .sub-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16px;
  margin: 2.4rem 0;
  color: #1E3932;
  text-align: center;
  line-height: 33.25px;
}

.food-menu .item-info .button {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 16px;
  border-radius: 30px;
  color: #1E3932;
  font-weight: 700;
}

.food-menu .item-info .button:hover {
  background-color: #DBE5E2;
}

.order {
  display: grid;
      grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
}

.order .food-menu {
  display: grid;
  grid-template-rows:auto 1fr;
}

.order .food-menu .item-image, .order .food-menu .item-info {
  width: 100%;
}

.order .food-menu .item-info{
  background-color: #D4E9E2;
  padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="order">
        <div class="food-menu" id="item-four">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Order and pick up. Easy as that.</p>
                <p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
                <a class="button" href="#">See pickup options</a>
            </div>
        </div>
        <div class="food-menu" id="item-five">
            <div class="item-image">
                <img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
            </div>
            <div class="item-info">
                <p class="title">Floating into summer like…</p>
                <p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
                <a class="button" href="#">Order now</a>
            </div>
        </div>
    </div>
</body>
</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415