0

I have a simple page - html, body, .container, and img all have height 100%. html & body have margin & padding of 0px.

I have a long img that gets squeezed into the window (due to height: 100%). But there is a vertical scrollbar on the right. I can't figure out why.

I can force-hide it with overflow-y: hidden, but I'd like to know why it is there. (Shows up in Chrome, Safari, and Firefox, so it's not a browser bug.) 

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
.container {
  height: 100%;
}

img {
  height: 100%;
}
<div class="container">
  <img src="https://i2.wp.com/emilcarlsen.org/wp-content/uploads/sites/13/2014/12/20141120_130615.jpg" alt="">
</div>
Ross R
  • 8,853
  • 7
  • 28
  • 27
  • 2
    white space ... – Temani Afif Jan 04 '18 at 14:32
  • Nop, there is not white spaces. use chrome inspector and you will realize – Luis felipe De jesus Munoz Jan 04 '18 at 14:32
  • 1
    @LuisfelipeDejesusMunoz add font-size:0 and the scroll will disappear ;) or add `vertical-align:top` to image also – Temani Afif Jan 04 '18 at 14:33
  • @TemaniAfif is right. adding `font-size:0;` solves the problem – Luis felipe De jesus Munoz Jan 04 '18 at 14:35
  • @LuisfelipeDejesusMunoz and to be more precise it's white space overflowing that's why you don't see it in chrome inspector .. so you can also add `overflow:hidden` to container – Temani Afif Jan 04 '18 at 14:39
  • I can't recommend `font-size:0`, because there are browsers that will use the minimum font size from the user preferences. (for example, 7px instead of 0.) `vertical-align:top` is better. – Mr Lister Jan 04 '18 at 14:43
  • @MrLister - Are there any modern browsers that still don't support font-size:0 ? Although many support a minimum size, most, AFAIK, don't apply that to font-size:0, since it's obvious that such text is not intended to be read at all. – Alohci Jan 04 '18 at 14:48
  • @MrLister me too i don't recommand font-size:0 .. i simply said to Luis so he can see it's a white space issue :) it's clearly better to consider vertical alignement and also to understand it – Temani Afif Jan 04 '18 at 14:51
  • @Alohci Good question. I know this used to be a problem in the past, but I must admit I haven't tested that recently on all currently available browsers. – Mr Lister Jan 04 '18 at 14:51
  • The referenced duplicate is correct! Set `img {display: block;}` works perfectly. Thank you! – Ross R Jan 04 '18 at 17:33

0 Answers0