web-dev-qa-db-fra.com

CSS: couleur de fond uniquement à l'intérieur de la marge

J'ai cherché une réponse mais je ne l'ai pas trouvée nulle part. Ma question est assez simple: j'ai la couleur de fond de mon corps, puis une grande marge et maintenant je veux une couleur de fond différente inside the margin.

Comment puis-je faire cela avec CSS?

htmlcssmarginbackground-color
39
user1318194

Si votre marge est définie sur le corps, définir la couleur d'arrière-plan de la balise HTML devrait colorer la zone de la marge.

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

http://jsfiddle.net/m3zzb/

Ou comme suggestions de dmackerman, définissez une marge de 0, mais une bordure de la taille souhaitée et définissez la couleur de la bordure

43
Erik Funkenbusch

Au lieu d'utiliser une marge, pourriez-vous utiliser une bordure? Vous devriez le faire avec <div>, de toute façon.

Quelque chose comme ça?enter image description here

http://jsfiddle.net/GBTHv/

14
dmackerman

J'avais besoin de quelque chose de similaire et j'ai eu l'idée d'utiliser les pseudoclasses: before (ou: after)

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

JSFiddle

4
rlv-dan

Cela n’est pas possible du Modèle de Boîte . Cependant, vous pouvez utiliser une solution de contournement avec l’image border-css3, ou border-color en général css.

Cependant, je ne sais pas si vous avez un problème avec la réinitialisation de . Certains navigateurs définissent également une marge au format HTML. Voir Eric Meyers Reset CSS pour plus!

html{margin:0;padding:0;}
0
worenga