htmlcssmargin

How to remove unwanted margin between elements?

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>

CSS

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?

Solution

  • 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:

    1. 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)

    2. 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!)

    3. 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.