Como pongo color de fondo a un elemento?

Css | Escrito por Ezequiel M. | Marzo - 17 - 2009

Definir el color de fondo para un elemento es sencillo pero hay que tener en cuenta algunos aspectos. El resultado es diferente según la propiedad Display del mismo, si el elemento es de Linea (Inline) el color solo ocupara el espacio que ocupe el mismo y si es de Bloque (Block) el color ocupara todo el espacio mas allá del elemento.

Por ejemplo si tenemos un parrafo con la palabras “Puentecromatico.com – Diseño y Tutoriales” con la propiedad display:Inline el relleno solo ocupará ese espacio, y si no le aplicamos ningún display el color ocupara todo el espacio hasta el final del navegador, porque el elemento “P” es de bloque. Con display inline y block podemos obtener distintos resultados cuando utilicemos la propiedad Background-color.

Código CSS:

p{
display:inline; /*--El color solo ocupa el espacio del texto--*/
background-color:#e0d302;
}

p{
background-color:#e0d302; /*-- El color ocupa todo el espacio del navegador--*/
}

Código XHTML:

Resultado, Párrafo con Display Inline:

PuenteCromatico.com – Diseño y Tutoriales

Resultado, Párrafo por defecto o Display Block:

Puentecromatico.com – Diseño y Tutoriales