How do you stack an image directly on top of a div?

Question

I have an image that is on top of a div, but there is a little space between the div and image. I want there to be no space between. How is this done?

I've tried using different combinations of position: absolute; and position: relative;. I've also tried setting margin: 0;

.headImage {
  width: 100%;
  margin: 0;
}

.headRow {
  margin: 0;
  width: 100%;
  height: 110px;
  background-color: #333;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-right: 30px;
  border-bottom: 3px solid #b00;
}

<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div class="logo">
    <image id="logo" src="mushu.png">
  </div>
  <div class="name">
    <h1 id="name">
      Mushu
    </h1>
  </div>
</div>

I expect the image to be directly on top of the div with no whitespace in between.

score 0 · Accepted Answer · answered Jun 17 '19 at 17:25

Set the img to display:block;width:100%

.headRow {
  background: red;
}

img {
  display: block;
  width: 100%
}

h1 {
  margin: 0
}

<img class="headImage" src="https://static-cdn.jtvnw.net/jtv_user_pictures/9745b651-cc8b-4a7b-9cad-4082a65b2ec8-profile_banner-480.png">
<div class="headRow">
  <div>
    <img src="mushu.png">
  </div>
  <div>
    <h1>
      Mushu
    </h1>
  </div>
</div>

How do you stack an image directly on top of a div?

1 Answers1