Menu
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.
you can't color a margin, but the element exposed on either side is the body – you can set the background-color of that (it's in the style tags in the head of your html doc). The forum 'CSS' is closed to new topics and replies.
Rather than leave the padding transparent, you can add color to the padding since the background color doesn't fully extend past the text element.
You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.
If your margin is set on the body, then setting the background color of the html tag should color the margin area
html { background-color: black; }
body { margin:50px; background-color: white; }
http://jsfiddle.net/m3zzb/
Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color
Instead of using a margin, could you use a border? You should do this with <div>, anyway.
Something like this?
http://jsfiddle.net/GBTHv/
I needed something similar, and came up with using the :before (or :after) pseudoclasses:
#mydiv {
background-color: #fbb;
margin-top: 100px;
position: relative;
}
#mydiv:before {
content: "";
background-color: #bfb;
top: -100px;
height: 100px;
width: 100%;
position: absolute;
}
JSFiddle
That is not possible du to the Box Model. However you could use a workaround with css3's border-image, or border-color in general css.
However im unsure whether you may have a problem with resetting. Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!
html{margin:0;padding:0;}
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