Doctype html causing gap

Question

Getting this white gap between the orange and red.

enter image description here

If removing <!DOCTYPE html> the gap goes away but then it is not valid HTML. How to solve the orange-wrap to get the right height?

All code needed is here:

<!DOCTYPE html>
<html lang="de">
    <head>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }

            .wrap {
                border-bottom: solid 10px red;
            }

            img {
                background-color: orange;
            }

        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
        </div>
    </body>
</html>

Snippet and or http://jsfiddle.net/rabkbt9b/

* {
  margin: 0;
  padding: 0;
}

.wrap {
  border-bottom: solid 10px red;
}

img {
  background-color: orange;
}

<div class="wrap">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
</div>

@caramba Using `vertical-align: bottom` is not that clean. FYI. But it works too! I don't deny it! `;)` — Praveen Kumar Purushothaman, Jun 10 '15 at 08:09

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-10T08:06:23.413

4

Just give display: block; and margin: 0; to all the elements like this:

.wrap {
  border-bottom: solid 10px red;
  margin: 0 auto;
}

img {
  background-color: orange;
  display: block;
  margin: 0;
}

Snippet:

* {
  margin: 0;
  padding: 0;
}

.wrap {
  border-bottom: solid 10px red;
  margin: 0 auto;
}

img {
  background-color: orange;
  display: block;
  margin: 0;
}

<div class="wrap">
    <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="" />
</div>

edited Jun 10 '15 at 08:06

answered Jun 10 '15 at 08:03

Praveen Kumar Purushothaman

164,888
24
203
252

2

Yep, `display: inline-block` on the image is causing this. The reason for this is because `inline-block` elements have a space after them since it's an inline element officially. Changing the `inline-block` to `block` will fix this issue. or ofcourse use `vertical-align: bottom` but I think this is less of a clean fix. – SidOfc Jun 10 '15 at 08:06
@SidneyLiebrand Updated accordingly. Thanks for it. – Praveen Kumar Purushothaman Jun 10 '15 at 08:07
1

Thank you guys! actually adding `display:block;` to the img does the trick cause the `margin: 0;` is already from the ` * ` – caramba Jun 10 '15 at 08:10
No worries - just remember that when working with `display: inline-block` whitespace is involved if it hasn't been taken care of yet (e.g. by `font-size: 0 on parent and resetting it on children etc...`) – SidOfc Jun 10 '15 at 08:11
@SidneyLiebrand I guess even `float` and `overflow: hidden;` fixes that cr@p! `:P` – Praveen Kumar Purushothaman Jun 10 '15 at 08:12
Yep but `float` as you mentioned does have it's downsides as you can't use `text-align: center` to center something, or well you can but it has a weird outcome when used in combination with `float` anyways ;) – SidOfc Jun 10 '15 at 08:13
New proposal has `float: center;` I guess! LoL. – Praveen Kumar Purushothaman Jun 10 '15 at 08:16
1

After returning after a little while here I just wanted to add that `float: center;` will not be needed due to the upcoming flexbox spec which is already being implemented by major browsers and has support for [every major browser today](http://caniuse.com/#search=flexbox) ^.^. – SidOfc Sep 11 '15 at 11:28
You are right, @SidneyLiebrand... – Praveen Kumar Purushothaman Sep 11 '15 at 11:37

Doctype html causing gap

1 Answers1