64

I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.

How do I do that with CSS?

  • 1
    you **only** have background _inside the margin_. Box model: http://www.w3.org/TR/CSS2/box.html – c69 Apr 06 '12 at 20:22
  • 2
    if you use a padding instead of a margin, it will then have the background-color you chose for the element – bevacqua Apr 06 '12 at 20:32

5 Answers5

63

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

Erik Funkenbusch
  • 92,674
  • 28
  • 195
  • 291
  • 1
    or put a `div` #main_container inside the `body` to do the same thing – Dylan Valade Apr 06 '12 at 20:36
  • If your background color on the html tag is any color than white, when the page first loads, the color takes up the whole page for a second, before the color of the body kicks in, so it looks kind of weird. – frosty Jul 24 '15 at 18:24
  • @AlexF - outlook emails are not standard html, you are extremely limited in what you can do. – Erik Funkenbusch Aug 25 '18 at 03:14
20

Instead of using a margin, could you use a border? You should do this with <div>, anyway.

Something like this?enter image description here

http://jsfiddle.net/GBTHv/

dmackerman
  • 2,938
  • 5
  • 26
  • 43
  • Hi, I've done something similar, but the background color inside the border only extends to the bottom of the text inside the margin. I need it to be inside the whole margin area.. if that makes sense. –  Apr 06 '12 at 20:28
  • @user1318194 - I think you're confused by what margin means. Margin is the area around the element, so a border like above is exactly what margin is. – Erik Funkenbusch Apr 06 '12 at 20:34
  • 1
    Yeah, but with margins you can set it by percentage - borders you can't. So you if want a margin of 1% on the left and right, you won't be able to do that with borders. – frosty Jul 24 '15 at 18:23
  • if the color is transparent, then the border color will blend with the background color. – Alex78191 Jul 14 '22 at 11:22
8

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

rlv-dan
  • 976
  • 1
  • 10
  • 21
1

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;}
worenga
  • 5,776
  • 2
  • 28
  • 50
1

Are you possibly looking to change the margin color outside the border? Maybe outline outline will help? Particularly

outline-color: green;
Zachary Vance
  • 752
  • 4
  • 18
Katherine Langley
  • 31
  • 4