Ajuste de la altura de línea de elementos de etiqueta en formularios HTML

Question

Tengo un formulario con un elemento <label>, pero el espacio entre las dos líneas <label> es demasiado grande y no puedo ajustar la altura de línea del <label>.

Aquí hay un ejemplo de <label> y <p>, ambos con la misma CSS aplicada. Como puede ver, el <p> se ajusta correctamente, mientras que el <label> permanece sin cambios.

http://jsfiddle.net/QYzPa/

CÓDIGO:

form label, 
 
form p 
 
{  
 
    font-weight:bold; 
 
    line-height:.7em; 
 
}

<form style="width:200px;"> 
 
    <fieldset> 
 
     <label for="textarea">In ten or fewer words, explain American history</label> 
 
     <p>In ten or fewer words, explain American history</p> 
 
     <textarea name="textarea" rows="5" ></textarea> 
 
    </fieldset> 
 
</form>

Answer 1

Todas las etiquetas HTML se clasifican en categorías que describe su naturaleza Esta clasificación puede estar relacionada con la semántica, el comportamiento, la interacción y muchos otros aspectos.

Las etiquetas p y label se clasifican en la categoría de etiquetas "contenido de flujo". Pero hay una pequeña diferencia entre ellos: la etiqueta label también se clasifica en una categoría llamada "contenido de fraseo".

¿Qué significa todo esto en la práctica? La representación predeterminada del navegador seguirá las clasificaciones de etiqueta especificadas y tratará la etiqueta p como un elemento de bloque, mientras que la etiqueta label se tratará, de forma predeterminada, como un elemento en línea. Puede modificar esto sobrescribiendo la regla CSS predeterminada: simplemente diga al navegador que desea que su label se represente como un elemento de bloque.

label { 
    display: block; 
} 

que tiene que hacer, ya que los elementos que se encuentran en línea (display: inline) no pueden tener propiedades como height, line-height, margin-top, margin-bottom (serán ignoradas).

Si quieres un elemento en línea para tener una propiedad de altura, pero aún así mantener con su comportamiento en línea (sin causa un salto de línea), se puede declarar como:

label{ 
display:inline-block; 
} 

Siempre es bueno tomar una leer en la documentación de HTML. Here is a nice graph showing the categories, puede ahorrarle mucho tiempo, especialmente cuando se trata de estas pequeñas peculiaridades.

Answer 2

No sabe con certeza por qué, pero funcionará si se establece display: block; en la etiqueta

Answer 3

Creo que lo que Marcio está tratando de decir es que en inline elementos (como span s o label s), que pueden residir uno tras otro en el texto, no se puede especificar atributos que se aplican a todo el párrafo.

El obvio es text-align: el párrafo debe especificar la alineación y no el individuo span s. Entonces, como line-height y tal.

Lo contrario a las inline elementos son los block elementos como div o p que ocupan un cuadrado en una página y están dispuestas entre sí en un nivel de bloque superior. Este comportamiento se controla con el atributo CSS display con el que puede hacer que div se comporte como span y viceversa.