0

I'm sure there is a simple answer to this, I've just completed some learning and am now trying to apply it. Annoyingly I've gotten flexbox etc to do what I want but I've run into this issue I can't workaround - even though I'm sure it's simple.

In the HTML below I have an image with text below it and I want no gap between the text box and the image - but on is there and I can't remove it.

Thanks for helping me learn.

.container{
    background-color: black;
    display: flex;
    flex-direction: row;
    gap: 0.313rem;
    width: 38rem;

}

.card img{
    width: 100%;
}

.text{
    background-color: whitesmoke;
    }
<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="/normalize.css">
    <link rel="stylesheet" href="scratchpad.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="card-image">
          <img src="https://source.unsplash.com/random" alt="" />
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>

      <div class="card">
        <div class="card-image">
          <img src="https://source.unsplash.com/random" alt="" />
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>
    </div>
  </body>
</html>
webnumpty
  • 3
  • 2

2 Answers2

0

Something like this? The card-image div was creating the bottom gap above the text.

.container {
  background-color: black;
  display: flex;
  flex-direction: row;
  width: 38rem;
}

.card img {
  width: 100%;
  height: 100%;
}

.text {
  background-color: whitesmoke;
}
<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="/normalize.css">
    <link rel="stylesheet" href="scratchpad.css" />
  </head>

  <body>
    <div class="container">
      <div class="card">
        <img src="https://source.unsplash.com/random" alt="" />
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>

      <div class="card">
        <img src="https://source.unsplash.com/random" alt="" />
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>
    </div>
  </body>

</html>
Y.S.
  • 161
  • 1
  • 5
0

This works but I am not sure it is what you are looking for.

Also see this: Remove white space below image

.container{
    background-color: black;
    display: flex;
    flex-direction: row;
    gap: 0.313rem;
    width: 38rem;

}

.card img{
    width: 100%;
    display: block;
}

.text{
    background-color: whitesmoke;
    }
<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="/normalize.css">
    <link rel="stylesheet" href="scratchpad.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="card-image">
          <img src="https://source.unsplash.com/random" alt="" />
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>

      <div class="card">
        <div class="card-image">
          <img src="https://source.unsplash.com/random" alt="" />
        </div>
        <div class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </div>
    </div>
  </body>
</html>
KJEK-Code
  • 695
  • 1
  • 5
  • 10