margin doesn't get filled with background color,why

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>


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>


Box model exampe 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.

Tags:

Html

Css

Recent Posts