Removing white space between elements in CSS

Question

I made this simple 3 part css layout, but it's not behaving like it should.

CSS

#main-container {
    width: 1000;
    margin: 0 auto;
    height:100%;
}

.header{ 
    background-color:black; 
    width:100%; 
    height:150px;
}

.headertext{
    color:#A3BB02;
    font-size: xx-large;
}

.contenu{ 
    width:100%; 
    background-color:#A3BB02;  
    }

.footer{ 
    width:100%; 
    background-color:black; 
    min-height:100px; 
    }

Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Intro Projet Cloud</title>
    <link href='/css/design.css' rel='stylesheet' type='text/css' />
  </head>

  <body>
    <div id="main-container">
        <div class="header">
            <br/><br/><br/>
            <span class="headertext">blablabla</span>
        </div>
        <div class="contenu">
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                <a href="projetcloudm2">Acceder a l'application</a>
            </p>
        </div>
        <div class="footer"></div>
    </div>
  </body>
</html>

result result

Where does the white bar betwen contenu and the header and footer come from? There is no margin in may css.

Please note, that this is done with google app engine in eclipse doing a web project

score 7 · Accepted Answer · answered Jan 22 '13 at 15:21

7

Paragraphs have a margin on them by default (usually 1em 0). Add this to your styles to reset it:

p {
  margin: 0;
}

See DEMO.

answered Jan 22 '13 at 15:21

zxqx

5,115
2
20
28

No, see [8.3 Margin properties](http://www.w3.org/TR/CSS2/box.html#margin-properties), "Initial value: 0" – Olaf Dietsche Jan 22 '13 at 15:33
1

Those are recommendations though. Chrome, Firefox, Safari, and Opera all implement a default margin top and bottom for paragraphs. – zxqx Jan 22 '13 at 15:39
Ok, seems I misunderstood the "recommendation" part in TR. Although I don't see the gaps here with FF 16 ([JSFiddle](http://jsfiddle.net/K9S8F/)). – Olaf Dietsche Jan 22 '13 at 15:45
That is most likely because you have "Normalized CSS" checked on the left-hand side, which resets paragraph margins. – zxqx Jan 22 '13 at 15:47

score 2 · Answer 2 · answered Jan 22 '13 at 15:26

2

You have a Doctype that triggers Quirks mode. This causes browsers to emulate the bugs in ancient browsers which:

Breaks lots of CSS
Makes browsers inconstant with each other

Use a Doctype that triggers standards mode.

Since you are using HTML 4.01 Transitional that would be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(NB: HTML 4.01 Transitional is intended for use while transitioning documents from HTML 3.2 to HTML 4.01. New pages should be written against HTML 4.01 Strict or the HTML 5 draft).

You may have additional problems, but Quirks mode is so problematic that it isn't worth investigating them until the browser has been switched to Standards mode.

answered Jan 22 '13 at 15:26

Quentin

914,110
126
1,211
1,335

are you sure? bacause using you schema breaks my css. my width: 1000; is not working anymore (it look like width:100%) – Heetola Jan 22 '13 at 15:44
`width: 1000` is invalid CSS. The `width` property takes a length. A length (other than `0`) must have a unit. An invalid rule must be ignored. (One feature of quirks mode is that some browsers will disobey the spec and treat unitless lengths as being in `px`). Always [validate](http://jigsaw.w3.org/css-validator/) your CSS. – Quentin Jan 22 '13 at 15:52

score 0 · Answer 3 · answered Jan 22 '13 at 15:24

0

What you're seeing are default styles. Consider implementing a decent reset.

answered Jan 22 '13 at 15:24

Jezen Thomas

13,619
6
53
91

score 0 · Answer 4 · answered Jan 22 '13 at 15:29

0

.contenu p { 
    margin: 0; 
    padding: 10px 0 10px 0
}

Add this. This should give you about the same space between the p's as now, but without the whitespace between div's

answered Jan 22 '13 at 15:29

CoBolt

442
2
11

Removing white space between elements in CSS

4 Answers4