CODEWITHSUNDEEP
htmlcss
JWoods
JWoods

Reputation: 31

Nested div applying margin outside box model

I'm having trouble adding a margin to my <figure> while it is nested within the <header>.

When I apply margin-top:10px it is applying to the whole body instead of inside the <header> tag. I am also using reset.css if that helps at all.

This is for an assignment in college and can't get a hold of tutor for an answer.

Code:

<html>
   <body>
   <header>
      <figure></figure>
   </header>
   </body>
</html>

CSS:

    body {
          backround-color: #f2f2f2;
          margin:0px;
          padding:0px;
    }
    header {
           display: block;
           position: static;
           max-width: 980px;
           height: 100px;
           background: #1e1e1e;
           margin:0px auto 0px auto;
    }
    header figure {
           margin-top:10px; /** when this margin top is added it creates a margin on the full page instead of inside the header**/
           margin-left:10px;
           max-width:200px;
           height:80px;
           background:red;
    }

Upvotes: 0

Views: 488

Answers (2)

jmore009
jmore009

Reputation: 12923

Add padding to the header instead. Use box-sizing:border-box as well which will prevent the padding from extending outward:

header {
   display: block;
   position: static;
   max-width: 980px;
   height: 100px;
   background: #1e1e1e;
   margin:0px auto;
   padding: 10px 0 0 10px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

JSFIDDLE

Upvotes: 0

j08691
j08691

Reputation: 207900

What you're seeing is called collapsing margins. Add overflow:auto to your header to get the behavior you're after:

header {
    display: block;
    position: static;
    max-width: 980px;
    height: 100px;
    background: #1e1e1e;
    margin:0px auto 0px auto;
    overflow:auto;
}

jsFiddle example

Upvotes: 1

Related Questions