Menu
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>
911
Margin is creating space beyond the box model elements. So, we cannot apply color to the margin. If our requirement still applies color around the elements, instead of margin you can use padding. The padding property in html gives space around the innermost element's content of the box-like structure.
Styling of an element such as background color does not affect the margin. Padding is affected by the styling of an element, such as background color.
Answer 50faea7446ce3ec6a60004cf You cannot see the effect of margin-right because the 'width' property of div causes the margin of div to have more than 10px distance from the right wall of the body. Consequently, it causes the margin-right property not to have any visual effect.
To add color to CSS padding, you can use the background-clip property and the box-shadow property.
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>
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.
43
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
