Alguém pode me explicar a função do Display e o Line-Height fiquei meio perdido nesse assunto?
Alguém pode me explicar a função do Display e o Line-Height fiquei meio perdido nesse assunto?
Olá, João Paulo!
Obrigado por compartilhar sua dúvida conosco.
O display define como um elemento HTML se comporta e é exibido na página, ou seja, como ele ocupa espaço e se relaciona com os outros elementos ao redor. Alguns dos principais valores são:
block: o elemento ocupa toda a largura disponível e sempre começa em uma nova linha.
Exemplos: <div>, <section>, <header>.
inline: o elemento ocupa apenas o espaço do seu conteúdo e não quebra linha. Não permite definir largura e altura.
Exemplos: <span>, <a>.
inline-block: mistura dos dois anteriores. Fica na mesma linha, mas permite definir width e height.
none: o elemento não é exibido na tela e não ocupa espaço no layout.
flex: transforma o elemento em um contêiner flexível, facilitando o alinhamento e a distribuição dos elementos internos.
grid: permite criar layouts em linhas e colunas de forma mais estruturada.
Já o line-height controla a altura da linha do texto, ou seja, o espaçamento vertical entre uma linha e outra. Ele é muito utilizado para melhorar a legibilidade do conteúdo.
Exemplo:
p {
line-height: 1.6;
}
Valores comuns:
1.5) → recomendado, pois se adapta ao tamanho da fontepx, em, rem)De uma forma resumida:
display controla o comportamento e o posicionamento do elemento no layout.line-height controla o espaçamento entre as linhas de um texto.Espero que isso ajude a esclarecer!
Abraços e bons estudos! ✨