Can't get rid of a white space between image and div element

Question

(https://i.stack.imgur.com/G9OiS.png)

I can not get rid of this space between the wave image and the skills

<div>

element. Tried everything in my knowlege but can't seem to be able to remove it. Can't detect the error.

The html code is:

    <img class="wave-img" src="images/background-curve.png">    
    <div class="skills" id="skills">
        <h1 class="skills-title">Skills</h1>
        <ul class="skills-list">
            <li class="skills-item-1 skills-item">
                HTML5
            </li>
 
        </ul>
        <br><br><br><br><br>
    </div>

CSS:

.wave-img {
    padding: 0;
    margin: 0em;
    margin-top: 4em;
}
img {
    height: 100%;
    width: 100%;
    align-self: center;
    padding-top: 1em;
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
.skills {
    margin: 0em;
    background-color: var(--purple);
    position: relative;
    height: 100vh;
}
div {
    padding: 1em 4em 3em 4em;
}
div {
    display: block;
}

I have ensured that image's margin is 0 and so is tag's. On inspecting none of the two elements are taking up that space in terms of margin/padding. Hovering over that portion selects the entire body on inspecting. I am expecting to find the cause behind this space. Where is it coming from?

Try removing the line break in your code for the image = `
`? Also have you tried adding a `reset` for padding and margin? — dale landry, Jul 23 '23 at 19:55
Right, there is clearly whitespace in your markup between the `` and the `
`. — Pointy, Jul 23 '23 at 20:00

score 1 · Answer 1 · edited Jul 23 '23 at 21:36

That is because of default line-height and the image alignment against the existing line height.

Try vertical-align:top for image. That's all.

.wave-img {
  padding: 0;
  margin: 0em;
  margin-top: 4em;
}

img {
  height: 100%;
  width: 100%;
  align-self: center;
  padding-top: 1em;
}

img {
  overflow-clip-margin: content-box;
  overflow: clip;
  vertical-align: top;
}

.skills {
  margin: 0em;
  background-color: purple;
  position: relative;
  height: 100vh;
}

div {
  padding: 1em 4em 3em 4em;
}

div {
  display: block;
}

<img class="wave-img" src="https://picsum.photos/800/550">
<div class="skills" id="skills">
  <h1 class="skills-title">Skills</h1>
  <ul class="skills-list">
    <li class="skills-item-1 skills-item">
      HTML5
    </li>
  </ul>
  <br><br><br><br><br>
</div>

Can't get rid of a white space between image and div element

1 Answers1