Container with an image has a strange height

Question

I have an image inside the container. The image has a height of 2px and container has no defined height. For some reason the container takes 18px of height. If I make an image 18px high, div takes 22px, if image is 20px, div is 24px. I tried to use display: block, inline and inline-block. Same thing. Then I tried display: flex and it worked. Also, I figured if I just remove the div then I will just have picture with height of 2px. So, my question is why the div is taking that height?

<div>
  <img class="colorbar__img" src="https://i.ibb.co/ZgQjMDd/colorstripe.png" alt="Color bar" />
  </div

Here is the codepen with an example: https://codepen.io/in43sh/pen/mZMBOp

are you trying to do a custom border? If so, why not css gradient? — BugsArePeopleToo, Jun 25 '19 at 17:57
@BugsArePeopleToo It's just a colorbar staying on the top of each page for some reason. It's from the project I'm working on. I haven't thought about using gradient. Isn't the picture too big for it? — in43sh, Jun 25 '19 at 18:03
Gradient can be any size at all because it is applied as a background: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients#Creating_color_bands_stripes — BugsArePeopleToo, Jun 25 '19 at 19:26

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

I tried applying img { display:block } and that fixed it for me (Chrome, Mac).

The extra height is in there because the browser is rendering the whitespace in the markup as text, applying the font-size and line-height to the content of the div. You might experiment with removing all whitespace from your markup, or setting the font size to zero .one { font-size:0; line-height:0; }

score 2 · Answer 2 · answered Jun 25 '19 at 17:59

2

It's because, by default, img tags are inline-elements with a line-height. You can get around this by adding css for the img tag to change it to a block element:

img {
 display: block;
}

answered Jun 25 '19 at 17:59

disinfor

10,865
2
33
44

brooksrelyt · Answer 3 · 2019-06-25T18:05:31.983

0

img {
  display: block;
}

body,
html {
  margin: 0;
}

<div class="one">
  <img class="colorbar__img" src="https://i.ibb.co/ZgQjMDd/colorstripe.png" alt="Color bar" />
</div>

edited Jun 25 '19 at 18:05

answered Jun 25 '19 at 17:56

brooksrelyt

3,925
5
31
54

Container with an image has a strange height

3 Answers3