CSS

问题

This seems to be a common problem but none of the solutions I found have worked for me.

HTML

<html>
    <head>
        <link rel="stylesheet" href="c/lasrs.css" type="text/css" />
    </head>
    <body>
        <div class="header">
            <img src="i/header1.png">
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. 
               Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, 
               massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, 
               bibendum at, posuere sit amet, nibh.</p>
        </div>
    </body>
</html>

body {
    min-width: 950px;
    background-color: #FFFFFF;
    color: #333333;
}

.header {
    width: 950px;
    height: 171px;
    margin: 0px auto;
    padding: 0px;
    background-color: #CCCCCC;
    position: relative;
}

.content {
    width: 950px;
    margin: 0px auto;
    padding: 0px;
    background-color: #E3EEF9;
    position: relative;
}

I deliberately broke the image path and set a background colour for the .header div so that I could see if they were touching. This is what my page looks like:

page example

As you can see I've tried setting the padding and margins on both divs to 0.

Why is there still a gap?

回答1:

This is due to the following:

Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

So try:

p {
     margin: 0px;
}

Note: browsers add default styling on other elements too! This can be both useful and annoying in different situations. There are three ways to go about this:

Completely remove any default styles that the browsers might have. This is accomplished by using a Reset Stylesheet. The most popular one is Eric Meyer’s CSS Reset. If you want to go all out and have a completely clean start in any browser, use Meyer's technique. This method is preferred over using the slow *{ margin:0; padding:0; } reset approach (Read here why)
Normalize the stylesheet to your own defaults. A large annoyance of webdesigners is that different browsers use different default styles. However, a complete reset comes with the time-consuming trouble of redefining the styles of all elements. Therefore, you can normalize all default styles of the browsers by using a predefined set of consistent and sensible default styles. The common approach is to use normalize.css for this (Twitter, Github and SoundCloud use this!)
Adjust the defaults when necessary or consciously work around the defaults. The most common way (not saying it's the best way) to work with the defaults is to know they exist and adjust them when necessary. Default styles are there for a reason: they can help developers to quickly get the looks they are after. Is the look slightly off? Simply adjust the styles accordingly. However, make sure you use the correct tags for the correct elements. For example, instead of removing the <p> margins for inline texts, you should use the <span> tag (no default margin)

That should help you understand what's going on behind the scenes.

回答2:

Your margins in the paragraphs are overflowing out of the div (this is normal) you can either set

p {
   margin: 0;
}

or apply overflow hidden to your divs

div {
  overflow: hidden;
}

回答3:

use

*{
    padding:0;
    margin:0;
}

in your style

回答4:

Add this:

*{
    margin: 0;
    padding: 0;
}

回答5:

Both divs are touching. The margin/padding of DIVs is always 0 by default, so your modifications have no effect. The <p> however does have a margin, and as it is nested into the div it looks like the div has a padding.

p {
    margin: 0;
}

will fix this.

回答6:

Try using some reset css, because all browsers come with some default styling link margins, paddings, line-heights, font-styling and you need to start from none-styling elements.

I recommend using Eric Meyer reset CSS ( http://meyerweb.com/eric/tools/css/reset/ )