0

Im unable to remove the white space between the img and the h3. I made a codepen to show:https://codepen.io/morper/pen/RQYKpw

This is the html:

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

div {
  border: black solid 1px;
  background-color: #0017ff;
  width: 100%;
  height: 100px;
}

img {
  margin: 0;
  padding: 0;
}

h3 {
  background-color: #ff0c57;
  margin: 0;
  padding: 0;
}
<body>
  <main>
    <div>div</div>
    <img src="https://images-gmi-pmc.edge-generalmills.com/e8198dd2-770b-4c7c-a748-ca7538cf48d0.jpg" alt="cookies">
    <h3>H3</h3>
    <p>paragraph</p>
  </main>
</body>

I´ve tried to set margin and padding to 0, but that doesnt cut it.

Håken Lid
  • 22,318
  • 9
  • 52
  • 67
morper
  • 1
  • 1

1 Answers1

0

Use display: block on the image.

    * {
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      text-align: center;
    }

    div {
      border: black solid 1px;
      background-color: #0017ff;
      width: 100%;
      height: 100px;
    }

    img {
      margin: 0 auto;
      padding: 0;
      display: block;
    }

    h3 {
      background-color: #ff0c57;
      margin: 0;
      padding: 0;
    }
    <body>
      <main>
        <div>div</div>
        <img src="https://images-gmi-pmc.edge-generalmills.com/e8198dd2-770b-4c7c-a748-ca7538cf48d0.jpg" alt="cookies">
        <h3>H3</h3>
        <p>paragraph</p>
      </main>
    </body>
Håken Lid
  • 22,318
  • 9
  • 52
  • 67
  • it's better to give the reason as display:block may not be suitable in all the cases – Temani Afif Feb 24 '18 at 12:09
  • Yeah. I was considering that, but there's a good explanation of how this works in the duplicate question. https://stackoverflow.com/a/34952703/1977847 Also, I find that I almost never actually use images inline. They are either block elements or in a flex container. – Håken Lid Feb 24 '18 at 12:33
  • so instead of answering consider flagging as a duplicate ;) – Temani Afif Feb 24 '18 at 12:35
  • I didn't think about checking for duplicates until after I had posted an answer. But by the time I had found a duplicate, you had found another one. – Håken Lid Feb 24 '18 at 12:40