Why doesn't margin get filled with background color in CSS?

Question

I have this simple piece of HTML.

Why doesn't the background color fill the entire #footer element's background - specifically, including the margin?

<!doctype html>
<html>

<head>
  <style>
    #footer {
      background: #263238;
      margin: 100px;
      padding: 0;
    }
    .footer-text {
      margin: 0;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="footer">
    <div class="footer-text">All Rights Reserved © 2016</div>
  </div>
</body>

</html>

Use `padding` instead of `margin`. Margin adds external indents. `padding` adds internal. — Mohammad Usman, Dec 22 '16 at 12:56
read this http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding. It will help you — priya_singh, Dec 22 '16 at 12:58

Fueled By Coffee · Accepted Answer · 2016-12-22T14:30:07.860

54

You should use padding instead of margin as described by CSS's Box Model.

Margin is providing space beyond the element's box and therefore won't be colored - it's simply space.
Padding on the other hand provides space around the inside of the element's box and is colored and affected by other styles.

<!doctype html>
<html>      
  
  <head>
     <style>
        #footer {
           background: #263238;
           padding: 100px;
        }
        .footer-text {
           margin: 0;
           color: #fff;
        }
     </style>
  </head>
    
  <body>
     <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
     </div>
  </body>   
 
</html>

edited Dec 22 '16 at 14:30

answered Dec 22 '16 at 13:01

Fueled By Coffee

2,467
7
29
43

I'm trying to use color just the top padding/(what I thought would be the margin) not the whole background color of that that div. Is there away to separate the top into a different color or do you just need a separate div and change the background color of that? – Micah Jan 04 '23 at 19:07

score 7 · Answer 2 · answered Dec 22 '16 at 13:04

7

This is how the css box model works. Tha background is applied only to the padding and content areas, that is why you don't see the background in the margin. the fix is simple just change the margin to be padding.

answered Dec 22 '16 at 13:04

Shlomi Haver

954
9
14

Pravin Vavadiya · Answer 3 · 2016-12-22T13:06:04.837

6

You can use padding.

If you can use margin then it's leave space outside of border and padding it's leave space inside border. So it's works perfect for you using padding.

 #footer{background: #263238; padding: 100px;}
 .footer-text{margin: 0;color: #fff;}

 <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
    </div>

edited Dec 22 '16 at 13:06

answered Dec 22 '16 at 13:00

Pravin Vavadiya

3,195
1
17
34

score 3 · Answer 4 · edited Jul 10 '19 at 14:51

3

Try giving border: 1px solid transparent to the parent element of the p tag.

edited Jul 10 '19 at 14:51

treyBake

6,440
6
26
57

answered Sep 14 '18 at 07:00

Keerthivasan

31
1

Naveed Ramzan · Answer 5 · 2016-12-22T13:02:49.687

0

<!doctype html>
    <html>
        <head>
           <style>
              #footer{background: #263238;padding: 100px;}
              .footer-text{margin: 0;color: #fff;}
           </style>
        </head>
        <body>
            <div id="footer">
                <div class="footer-text">All Rights Reserved © 2016</div>
            </div>
        </body>
   </html>

Margin is applied outside the box while padding is applicable inside the box.

Here is an example of margin/padding.

http://www.goer.org/images/html/boxbasic.png

edited Dec 22 '16 at 13:02

answered Dec 22 '16 at 12:59

Naveed Ramzan

3,565
3
25
30

Please explain why this works. Otherwise it's useless. – Pogrindis Dec 22 '16 at 13:00
Margin is out side of the box. while Padding is inside the box. – Naveed Ramzan Dec 22 '16 at 13:01
Put that in your answer. Also that's not a very clear explanation: see : http://stackoverflow.com/a/41283805/1606432 – Pogrindis Dec 22 '16 at 13:01
Updated with an example – Naveed Ramzan Dec 22 '16 at 13:03

ab29007 · Answer 6 · 2016-12-22T13:12:31.180

Margin doesn't get included in the Box-model of your div.

You add padding instead of margin. That will get you uniform color in your footer. like this:

#footer {
  background: #263238;
  margin:0;
  padding:100px;
}

But if you are looking for different color on the outside then you can get this using border like this:

#footer {
  background: #263238;
  margin:0;
  padding:0;
  border:100px solid green;
}

Now you can include border in your box-model so it doesn't mess up with your page structure. Do this by defining box-sizing for the footer.

#footer {
  background: #263238;
  margin:0;
  padding:0;
  border:100px solid green;
  box-sizing:border-box;
}

score 0 · Answer 7 · answered Sep 23 '20 at 23:36

<!doctype html>
<html>      
  
  <head>
     <style>
        #footer {
           background: #263238;
           padding: 100px;
        }
        .footer-text {
           margin: 0;
           color: #fff;
        }
     </style>
  </head>
    
  <body>
     <div id="footer">
        <div class="footer-text">All Rights Reserved © 2016</div>
     </div>
  </body>   
 
</html>

Why doesn't margin get filled with background color in CSS?

7 Answers7