Weird Body Overflow - CSS

Question

I am having trouble with setting an image to 100% of the body height. I am getting this odd white space at the bottom of the page, even though I have margin and padding set to 0 on everything. I could just use overflow-y: hidden, but I would prefer to just figure out why it's doing that. Thanks!

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

img {
  height: 100%;
}

<img src="https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="background" />

Use `display:block`. By the way setting the `margin` and `padding` for `*` selector isn't a good practice — Mattonit, Mar 03 '17 at 20:41
@H.Allen It is completely acceptable in the manner you are using it. — AP., Mar 09 '17 at 23:06

score 0 · Answer 1 · answered Mar 03 '17 at 20:38

0

You need to use display: block on the img.

answered Mar 03 '17 at 20:38

AP.

8,082
2
24
33

Weird Body Overflow - CSS

1 Answers1