Definir espaçamento entre linhas

145

Como posso definir o espaçamento entre linhas com CSS, como podemos defini-lo no MS Word?

css line Lua
fonte

Respostas:

236

Experimente a propriedade altura da linha .

Por exemplo, tamanho de fonte de 12px e 4px de distância das linhas inferior e superior:

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

Ou com emunidades

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */
Mario Cesar
fonte
10
Descobri que também precisava display: block;que essas configurações fossem eficazes em todos os lugares, não apenas na parte superior e inferior do parágrafo.
precisa saber é o seguinte
2
Lembre-se de que você não pode definir o valor da propriedade altura da linha em '1' ou '100%' se estiver configurando-o para um elemento <a>. Se você quiser, pode definir um <p> entre seu texto e seu <a>, por exemplo.
raulchopi
2
ele não funciona com o span porque, como mencionado por @PatrickT, o span não é exibido: block
walv
1
Além disso, se você precisar usá-lo em um intervalo, é preferível usar display: inline-block, em vez de display: block.
Mario Cesar
1
@Userthatisnotauser, não é possível que algo semelhante aconteça com usuários que precisarão usar o miniaplicativo java ou aplicativo da web que requer um soquete (devido à perda de suporte e todos os navegadores estão retirando o suporte em seu plug-in personalizado) . O site dedicado à missão Cassini ainda requer o plugin de tempo rápido para assistir ao vídeo online. Sem mencionar apenas os plugins allows permitem assistir a vídeos estereoscópicos através de displays estereoscópicos em streaming. No meu país, dois grandes provedores de canais de TV ainda precisam do silverlight com planos de não atualizar.
user2284570
103

Você também pode usar um valor sem unidade, que é o número de linhas: line-height: 2;espaço duplo,line-height: 1.5; é uma e meia, etc.

MikeTheLiar
fonte
Não funciona no Opera baseado em Presto. Eu preciso de uma solução alternativa ... por favor! : \
user2284570
@ status do usuário: funciona na minha máquina. Você tentou alguma das outras respostas?
MikeTheLiar
Quero dizer, o elemento CSS é reconhecido, mas não afeta a saída de renderização. Testado 12.16 e 12.50. A outra resposta é basicamente a mesma: todos dizem para usar o elemento altura da linha!
user2284570
@user Porque é assim que você faz. Eu imagino que é um bug do navegador ou falta de suporte para essa regra css. Provavelmente deve ser feita como uma pergunta separada.
MikeTheLiar
Claro, pedir uma solução alternativa é fora de tópico aqui ... pela maneira como eu vi isso afetar outras marcas de navegadores: existe quando a configuração é definida com o DOM ou quando contenteditable = "true" está presente.
usar o seguinte comando
12

Você não pode definir o espaçamento entre parágrafos no CSS usando a altura da linha, o espaçamento entre os <p>blocos. Em vez disso, define o espaçamento entre linhas entre parágrafos, o espaço entre as linhas dentro de um <p>bloco. Ou seja, altura da linha é a entrelinha do tipógrafo que é liderada dentro do parágrafo e é controlada pela altura da linha.

Atualmente, não conheço nenhum método no CSS para produzir (por exemplo) um <p>espaçamento de 0.15em , seja usando variantes em ou rem em qualquer propriedade da fonte. Suspeito que isso possa ser feito com flutuadores ou compensações mais complexos. Pena que isso seja necessário em CSS.

Thomas Visel
fonte
7
Você não poderia usar margens para isso no <p>espaçamento?
Flimm 10/09/2015
4
Em alguns casos, margin-tope / ou margin-bottompode efetivamente realizar o que é desejado aqui.
precisa saber é o seguinte
10

Se você deseja linhas condensadas, pode definir o mesmo valor para font-sizeeline-height

No seu arquivo CSS

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

No seu arquivo 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>

-> Jogue com este trecho em jsfiddle.net

Você também pode aumentar o line-heightcontrole de espaçamento entre linhas finas:

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

Experimente esta propriedade

line-height:200%;

ou

line-height:17px;

use o aumento e diminua o volume

ANANTH.S
fonte
@AVD: Não funciona no Opera baseado em Presto. Eu preciso de uma solução alternativa ... por favor! : \
user2284570
4

Não tenho certeza se é isso que você quis dizer:

line-height: size;
Alan Haggai Alavi
fonte
4

Tente line-heightpropriedade; existem muitas maneiras de atribuir altura da linha

Harsha MV
fonte
1

Sim, como todo mundo está dizendo, line-heighté a coisa. Qualquer fonte que você esteja usando, um caractere de altura média (como um ou ■, que não passa pela parte superior ou inferior) deve ter o mesmo comprimento de altura em line-height: 0.6até 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 snippet

RubenVerg
fonte
0

lineSpacing é usado no React Native (ou aplicativos móveis nativos).

Para a web, você pode usar letterSpacing(ou letter-spacing)

Eric Kim
fonte