Establecer espaciado de línea

145

¿Cómo puedo configurar el espaciado de línea con CSS, como podemos configurarlo en MS Word?

css line Luna
fuente

Respuestas:

236

Pruebe la propiedad de altura de línea .

Por ejemplo, tamaño de fuente de 12 píxeles y 4 píxeles de distancia de las líneas inferior y superior:

line-height: 20px; /* 4px +12px + 4px */

O con emunidades

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
Mario Cesar
fuente
10
Descubrí que también necesitaba display: block;que esta configuración fuera efectiva en todas partes, no solo en la parte superior e inferior del párrafo.
PatrickT
2
Recuerde que no puede establecer el valor de la propiedad de altura de línea en '1' o '100%' si lo configura en un elemento <a>. Si así lo desea, puede establecer un <p> entre su texto y su <a>, por ejemplo.
raulchopi
2
no funciona con span porque, como lo menciona @PatrickT, span no se muestra: bloque
walv
1
@walv, no se supone que lo haga. Además, si necesita usarlo en un lapso, es preferible usar display: inline-block, en lugar de display: block.
Mario Cesar
1
@Userthatisnotauser no puede sucederle algo similar a los usuarios que necesitarán usar el applet de Java o la aplicación web que requiere ᴜᴅᴘ socket (debido a la pérdida de ɴᴘᴀᴘɪ soporte y todos los navegadores están retirando el soporte en su complemento personalizado ᴀᴘɪ) . El ᴊᴘʟ sitio web dedicado a la misión Cassini todavía requiere el complemento de tiempo rápido para ver su videoꜱ en línea. Sin mencionar que solo ɴᴘᴀᴘɪ plugins le permite ver videos estereoscópicos a través de pantallas estereoscópicas en streaming. En mi país, dos importantes proveedores de canales de televisión aún requieren Silverlight con planes para no actualizarse.
usuario2284570
103

También puede usar un valor sin unidad, que es el número de líneas: line-height: 2;es doble espacio, line-height: 1.5;es uno y medio, etc.

MikeTheLiar
fuente
No funciona en Opera basada en Presto. Necesito una solución ... ¡por favor! : \
user2284570
Estado de usuario @: funciona en mi máquina. ¿Intentaste alguna de las otras respuestas?
MikeTheLiar
Quiero decir que el elemento CSS es reconocido, pero no afecta la salida de representación. Probado 12.16 y 12.50. La otra respuesta es básicamente la misma: ¡TODOS DICEN usar el elemento de altura de línea!
user2284570
@usuario Porque así es como lo haces. Me imagino que es un error del navegador o falta de soporte para esa regla CSS. Probablemente debería hacerse como una pregunta separada.
MikeTheLiar
Claro, pedir una solución alternativa está fuera de tema aquí ... por la forma en que he visto que afecta a otras marcas de navegadores: existe cuando la configuración se establece con el DOM o cuando contenteditable = "true" está presente.
user2284570
12

No puede establecer el espaciado entre párrafos en CSS utilizando la altura de línea, el espaciado entre <p>bloques. Eso, en cambio, establece el espacio entre líneas dentro del párrafo, el espacio entre líneas dentro de un <p>bloque. Es decir, la altura de línea es el interlineado del tipógrafo que está dentro del párrafo controlado por la altura de línea.

Actualmente no conozco ningún método en CSS para producir (por ejemplo) un <p>espaciado de 0.15em , ya sea usando variantes em o rem en cualquier propiedad de fuente. Sospecho que se puede hacer con flotadores o compensaciones más complejas. Una pena que esto sea necesario en CSS.

Thomas Visel
fuente
77
¿No podrías usar márgenes para eso para el <p>espaciado?
Flimm
44
En algunos casos, margin-topy / o margin-bottompuede lograr efectivamente lo que se desea aquí.
user1147171
10

Si desea líneas condensadas, puede establecer el mismo valor para font-sizeyline-height

En su archivo CSS

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

En su archivo HTML

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Juega con este fragmento en jsfiddle.net

También puede aumentar line-heightpara el control de espaciado de línea fina:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}
olibre
fuente
9

Prueba esta propiedad

line-height:200%;

o

line-height:17px;

usa el aumento y disminuye el volumen

ANANTH.S
fuente
@AVD: No funciona en Opera basada en Presto. Necesito una solución ... ¡por favor! : \
user2284570
4

No estoy seguro de si esto es lo que quisiste decir:

line-height: size;
Alan Haggai Alavi
fuente
4

Probar line-heightpropiedad; hay muchas formas de asignar altura de línea

Harsha MV
fuente
1

Sí, como todos dicen, line-heightes la cosa. Cualquier fuente que esté utilizando, un carácter de altura media (como a o ■, que no pase por la parte superior o inferior) debe ir con la misma altura-longitud line-height: 0.6a 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>
Expandir fragmento

RubenVerg
fuente
0

lineSpacing se usa en React Native (o aplicaciones móviles nativas).

Para la web puedes usar letterSpacing(o letter-spacing)

Eric Kim
fuente