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

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 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 blocos. Em vez disso, define o espaçamento entre linhas entre parágrafos, o espaço entre as linhas dentro de um 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 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 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