Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Yaxin Yuan
Yaxin Yuan
11,191 Points

Margin and Padding of Inline Element?

<html>
<head>
    <meta charset="UTF-8">
    <title> Title </title>
    <style>
        header{
            background-color:red;
        }
        section{
            background-color:orange;
        }
        footer{
            background-color:green;
        }
    </style>
</head>

<body>
    <header>
         <span> header </span>
    </header>
    <section>
         <span> section </span>
    </section>
    <footer>
         <span> footer  </span>
    </footer>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title> Title </title>
    <style>
        header{
            background-color:red;
        }
        section{
            background-color:orange;
        }
        footer{
            background-color:green;
        }
    </style>
</head>

<body>
    <header>
         <p> header </p>
    </header>
    <section>
         <p> section </p>
    </section>
    <footer>
         <p> footer  </p>
    </footer>
</body>
</html>

The only difference of the above to blocks of code is "span -> p". There will be some extra space between each element for the case of "p". I heard it is because of something call margin collapse.. But there is white empty space on top of header for both cases. But, "span" is an inline element, how come there still exists such empty space? is there margin collapse effect for inline element as well? Thank you!

1 Answer

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

its normal, since the default applies of the browser, it applies an auto margin to the right and bottom by default if you dont tell it not to. there is a normalize file of css, that makes all that set to 0.

Andrew Stelmach
Andrew Stelmach
12,583 Points

You could be right, but I have experienced margin collapses even when starting with Normalize.

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

possible, if you might miss a margin rule somewhere that would override the normalize margin's rule.