White space remains after css reset

Question

I have a webpage with a banner image at the top. It contains the browser default styles with padding and margins creating white space around the sides. I've set the padding and margin to 0px in both the body and * selectors but the white space remains.

I've added a link to the normalize.css sheet here, but still have white spaces. What else can I do to get rid of the white space?

<body>
    <div class = 'main-header'>

        <img src='http://imageserver.amlaw.com/publications/LAW-14-05656_header.jpg'>

</div>
</body>

and the css is:

* {
margin: 0;
padding:0;
border=0;
}

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jun 14 '16 at 16:05
Also in the [CSS box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) the box model consists of border in addition to margin and padding. — apokryfos, Jun 14 '16 at 16:08
Would be better if you search first, there are already a few question here with the same issue. — dippas, Jun 14 '16 at 16:53

score 1 · Answer 1 · answered Jun 14 '16 at 16:15

1

Try to add this:

.main-header { line-height: 0; }

This removes the whitespace under the image, which is reserved for those parts of the letters that extend under the baseline. But it should only be used in elements that only contain images (i.e. no text).

(By the way: border=0; is not a valid setting - it should be border: none;)

answered Jun 14 '16 at 16:15

Johannes

64,305
18
73
130

Or just set the image to `display:block` - http://codepen.io/Paulie-D/pen/GqZeeK – Paulie_D Jun 14 '16 at 16:27
This cannot work, because the OP is talking about "creating white space around the sides". This only solves white space at the bottom of the image. – Mr. Hugo Jun 15 '16 at 13:36
1

@JoostS That's what I wrote in my answer, no need for downvotes. "Around the sides" is a rather unprecise expression, which could for example come from a not-native speaker (in other languages also the bottom border translates to "side"). If you look at the "duplicate" mark and in the question and its reference to another question, even that one only regards space *below* the image... – Johannes Jun 15 '16 at 15:30
You are right, but I honestly think that does not serve future visitors of this page. Consider that you are not only answering this persons problem, but everyone who searches for this problem. Most people know basic English and therefore most people will have mislinked their reset css file. Therefore I think that testing for a working reset (resetting the default body margin) is the only valid solution for 'unwanted white space on the sides'. – Mr. Hugo Jun 15 '16 at 15:41
PS. I got two downvotes for the right answer. So do not worry about downvotes too much. :-) – Mr. Hugo Jun 15 '16 at 17:23

Aloso · Answer 2 · 2016-06-15T13:59:46.920

1

The whitespace at the bottom of the image ist there because it's inline by default, it's not a margin or padding. There are three ways to get rid of the space under the image:

Set display: block for the image (my recommendation)
Set line-height: 0 for the parent of the image. You shouldn't do this if it also contains text.
Float the image with float: left.

Here's a JSFiddle to try it out.

If you want to remove the space at the right side, the banner needs to have width: 100%, then it will fill the full width:

* {
    margin: 0;
    padding: 0;
    border: none;
}
img {
    display: block;
    width: 100%; /* insert this */
}

<body>
    <div class='main-header'>
        <img src='http://imageserver.amlaw.com/publications/LAW-14-05656_header.jpg'>
    </div>
</body>

edited Jun 15 '16 at 13:59

answered Jun 14 '16 at 16:32

Aloso

5,123
4
24
41

This cannot work, because the OP is talking about "creating white space around the sides". This only solves white space at the bottom of the image. – Mr. Hugo Jun 15 '16 at 13:36
I have edited it to remove the space at the side. – Aloso Jun 15 '16 at 14:01

White space remains after css reset

2 Answers2