css color de fondo se extiende tan lejos como el texto?

Question

¿Cómo establecería el color de fondo de un texto que no se expande al ancho de su elemento primario div? Usé h1{background color:white;} y envolví h1 alrededor del texto que quiero, pero el fondo blanco simplemente se extiende más allá del texto. Es casi como si estuvieras resaltando las palabras.

Answer 1

h1 es un elemento de bloque, por lo que utilizará toda el área disponible. por lo que cambiar este elemento de línea, para utilizar solamente su anchura

h1 { 
    display: inline; 
    background-color: white; 
} 

http://jsfiddle.net/wxNQR/

Answer 2

El problema es que h1 es un elemento de nivel de bloque y, por defecto, los elementos de nivel de bloque se expandirán para llenar todo el ancho disponible del elemento principal.

La forma más fácil de resolver esto es el elemento float:

h1 { 
    background-color: white; 
    float: left; 
} 

A continuación, tendrá el estilo del párrafo siguiente, de modo que no fluye alrededor del elemento de encabezado:

p { 
    clear: left; 
} 

Si se siente cómodo al no soportar IE7 y las siguientes, puede usar el selector de hermanos adyacente para hacer que esta selección sea más nítida, de modo que solo los elementos p directamente después de los elementos h1 tengan ese estilo:

h1 + p { 
    clear: left; 
}