Can someone help me, in a little css problem?

Question

So, I have an image and a black line,both of them width is 100%. But for some reason the image height size isn't 100%,and I have some little white space between the two element. This is what I want to fix,so I don't want that space there,and the image should stay responsive (mobile friendly)

Can someone tell me what I did wrong?

I think I used a wrong div structure for responsivility,I'm still a beginner in this.

Here is the code:

* {
  margin:0;
  padding:0;
}
img {
  width:100%;
}
.blackLine {
   display: block;
    width: 100%;
    height: 70px;
    background-color: #000000;
}

<img src="https://www.pacificenvironment.org/wp-content/uploads/2016/11/hong-kong-china-skyline-720P-wallpaper-1920x300.jpg" alt="Image">
<div class="blackLine">
</div>

look at https://stackoverflow.com/questions/20834199/gap-between-img-and-div ;) found at https://stackoverflow.com/search?q=%5Bcss%5Dimg+gap — G-Cyrillus, Nov 29 '20 at 19:35

score 1 · Accepted Answer · answered Nov 29 '20 at 19:35

There is whitespace in your code between the image and the blackline div. This whitespace is rendered as a single space, but because your elements are both full-width, the whitespace appears as a whole line since there's nowhere else to put it. Setting the font-size to 0 will remove the white space between the image and the div.

* {
  margin:0;
  padding:0;
}

div.font-zero
{
  font-size: 0;
}

img {
  width:100%;
}

.blackLine {
   display: block;
    width: 100%;
    height: 70px;
    background-color: #000000;
}

<div class="font-zero">
  <img src="https://www.pacificenvironment.org/wp-content/uploads/2016/11/hong-kong-china-skyline-720P-wallpaper-1920x300.jpg" alt="Image">
  <div class="blackLine">
  </div>
</div>

Can someone help me, in a little css problem?

1 Answers1