2012-04-06 16 views
32

He buscado una respuesta pero no pude encontrarla en ningún lado. Mi pregunta es bastante simple: tengo un color de fondo de mi cuerpo, luego un margen grande, y ahora quiero un color de fondo diferente dentro de el margen.CSS: color de fondo solo dentro del margen

¿Cómo hago eso con CSS?

+1

que ** ** Sólo tienen fondo _Inside la margin_. Modelo de caja: http://www.w3.org/TR/CSS2/box.html – c69

+2

si usa un relleno en lugar de un margen, entonces tendrá el color de fondo que eligió para el elemento – bevacqua

Respuesta

36

Si su margen se establece en el cuerpo, a continuación, establecer el color de fondo de la etiqueta html debe de color y el área del margen

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

http://jsfiddle.net/m3zzb/

sugerencias

O como dmackerman, establezca un margen de 0, pero un borde del tamaño que desea que sea el margen y establezca el color del borde

+0

Gracias, funcionó perfectamente – stackunderflow

+0

o puso 'div' #main_container dentro del' cuerpo' para hacer lo mismo –

+0

Si el color de fondo en la etiqueta html es de cualquier color que no sea blanco, cuando la página se carga por primera vez, el color ocupa toda la página por un segundo, antes de que el color del cuerpo entre en juego, por lo que parece un poco extraño. – frosty

0

Eso no es posible con el Modelo de caja. Sin embargo, podría usar una solución alternativa con la imagen de borde de css3 o color de borde en general css.

Sin embargo, no estoy seguro de si puede tener un problema con el restablecimiento. Algunos navegadores establecen un margen para html también. ¡Vea Eric Meyers Reset CSS para más!

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

En lugar de usar un margen, ¿podría usar un borde? Deberías hacer esto con <div>, de todos modos.

¿Algo como esto? enter image description here

http://jsfiddle.net/GBTHv/

+0

Hola, he hecho algo similar, pero el color de fondo dentro del borde solo se extiende hasta la parte inferior del texto dentro del margen. Necesito que esté dentro de todo el margen ... si tiene sentido. – stackunderflow

+0

@ user1318194 - Creo que está confundido por lo que significa margen. El margen es el área alrededor del elemento, por lo que un borde como el anterior es exactamente el margen. –

+0

Sí, pero con los márgenes puede establecerlo por porcentaje: fronteras que no puede. Entonces, si quieres un margen del 1% a la izquierda y a la derecha, no podrás hacer eso con bordes. – frosty

3

Necesitaba algo similar, y se acercó con el uso de: antes (o: 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

Cuestiones relacionadas