CSS: achtergrondkleur alleen binnen de marge

Ik heb naar een antwoord gezocht, maar kon het nergens vinden. Mijn vraag is redelijk simpel: ik heb een achtergrondkleur van mijn lichaam, dan een grote marge, en nu wil ik een andere achtergrondkleur binnende marge.

Hoe doe ik dat met CSS?


Antwoord 1, autoriteit 100%

Als uw marge op de body is ingesteld, moet het instellen van de achtergrondkleur van de html-tag het margegebied kleuren

html { background-color: black; }
body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

Of zoals dmackerman-suggesties, stel een marge in van 0, maar een rand van de grootte die u wilt dat de marge is en stel de randkleur in


Antwoord 2, autoriteit 33%

Kunt u in plaats van een marge ook een rand gebruiken? Je zou dit hoe dan ook moeten doen met <div>.

Zoiets?

http://jsfiddle.net/GBTHv/


Antwoord 3, autoriteit 13%

Ik had iets soortgelijks nodig en bedacht het gebruik van de :before (of :after) pseudoklassen:

#mydiv {
   background-color: #fbb;
   margin-top: 100px;
   position: relative;
}
#mydiv:before {
   content: "";
   background-color: #bfb;
   top: -100px;
   height: 100px;
   width: 100%;
   position: absolute;
}

JSFiddle


Antwoord 4, autoriteit 2%

Dat is niet mogelijk door het Box Model.
Je zou echter een tijdelijke oplossing kunnen gebruiken met de border-image van css3, of border-color in het algemeen css.

Ik weet echter niet zeker of je een probleem hebt met het resetten.
Sommige browsers stellen ook een marge in op html. Zie Eric Meyers CSS resetten voor meer!

html{margin:0;padding:0;}

Other episodes