Entendimento abrangente da altura da linha e alinhamento vertical

altura de linha, tamanho de fonte e alinhamento vertical são atributos-chave para definir o layout dos elementos dentro da linha. Esses três atributos são relacionamentos interdependentes e a alteração da distância entre as linhas e a definição de alinhamentos verticais requer seus esforços conjuntos. O conteúdo relevante do tamanho da fonte foi introduzido em detalhes nas fontes CSS. Este artigo introduzirá principalmente altura de linha e alinhamento vertical.

A altura da linha de altura da linha refere-se à distância entre as linhas de base da linha de texto. A altura da linha realmente afeta apenas elementos em linha e outros conteúdos em linha e não afeta diretamente os elementos no nível do bloco. Você também pode definir altura de linha para um elemento de nível de bloco, mas esse valor só terá um impacto quando aplicado ao conteúdo embutido dos elementos no nível do bloco. Declarar a altura da linha em um elemento de nível de bloco definirá uma altura mínima da caixa de linha para o conteúdo do elemento no nível do bloco

Valor: <nomin> | <spenstage> | <número> | Normal | herdar

Valor inicial: Normal

Aplicado a: todos os elementos

Herança: Sim

Porcentagem: tamanho da fonte em relação ao elemento

Para entender a altura da linha em profundidade, você precisa entender os termos comuns sobre a altura da linha.

Para elementos não substituídos ou parte do texto anônimo na linha, o tamanho da fonte e a família de fontes determina a altura da área de conteúdo. Na fonte da música, se o tamanho da fonte de um elemento em uma linha for 15px, a altura da área de conteúdo é de 15 px; Em outras fontes, a altura da área de conteúdo não é igual ao tamanho da fonte.

A área de conteúdo mais o espaçamento da linha é igual à caixa de linha em linha. Se o tamanho da fonte de um elemento não substituto em uma linha for de 15 px e a altura da linha for 21px, a diferença será de 6px. O agente do usuário divide esses 6 pixels em dois e aplica metade da parte superior e inferior da área de conteúdo, respectivamente, o que fornece a linha dentro da caixa

Quando a altura da linha é menor que o tamanho da fonte, a caixa de linha na linha é realmente menor que a área de conteúdo

A caixa de linha é definida como a distância entre a parte superior da caixa interna mais alta da linha da linha e a parte inferior da caixa interna mais baixa, e a parte superior de cada caixa de linha fica ao lado da parte inferior da caixa de linha anterior.

A margem interna, a margem externa e a borda não afetam a altura da estrutura da linha, ou seja, não afeta a altura da linha.

O limite da borda dos elementos em linha é controlado pelo tamanho da fonte em vez da altura da linha

As margens não serão aplicadas à parte superior e inferior dos elementos de não substituição na linha

margem-esquerda, preenchimento e esquerda, borda-esquerda são aplicadas ao início do elemento; Margem-direita, pateta-direita e direita são aplicadas ao final do elemento

A substituição de elementos dentro de uma linha requer o uso de valores de altura de linha para posicionar corretamente os elementos quando alinhados verticalmente. Porque o valor percentual do alinhamento vertical é calculado em relação à altura da linha do elemento. Para o alinhamento vertical, a altura da própria imagem é irrelevante, a chave é o valor da altura da linha

Por padrão, o elemento de substituição em linha está localizado na linha de base. Se você adicionar margem interna, margem externa ou borda ao elemento de substituição, a área de conteúdo será movida para cima. A linha de base do elemento de reposição é a linha de base da última caixa da linha no fluxo normal. A menos que o conteúdo do elemento de substituição esteja vazio ou o valor do atributo de transbordamento em si não é visível, neste caso a linha de base é a margem inferior da borda

O alinhamento vertical é usado para definir o alinhamento vertical, todos os elementos alinhados verticalmente afetarão a altura da linha.

Valor: linha de base | sub | super | top | TOP-TOP | meio | inferior | fundo de texto | <comprimento> | <spenstage> | herdar

Valor inicial: linha de base

Aplicado a: elementos em linha, elementos de substituição, células de tabela

Herança: Nenhum

Porcentagem: altura de linha em relação à altura da linha de elemento

[Nota] O valor percentual do alinhamento vertical no navegador IE7 não suporta a altura da linha decimal, e o efeito da exibição é diferente do dos navegadores padrão ao tomar linha de base, médio, fundo de texto etc. A solução comumente usada é definir a exibição: bloqueio em linha nos elementos da linha.