Tag html afetando a altura da linha, como torná -la consistente?

Question

Se eu tiver um <sup> tag em uma linha multi-line <p> tag, a linha com o superestrito nele tem um espaçamento maior de linha acima dela do que as outras linhas, inseguro de qual altura de linha eu coloquei no <p>.

Edite para esclarecimento: Eu não quero dizer que tenho muitos <p>S, cada um que está em uma única linha. Eu tenho um único <p> com conteúdo suficiente para causar embrulho em várias linhas. Em algum lugar (em qualquer lugar) no texto, pode haver um <sup> ou <sub>. Isso afeta a altura da linha para essa linha adicionando espaçamento extra acima/abaixo. Se eu definir uma altura de linha maior no <p> Isso não faz diferença para o problema. A altura da linha é aumentada, mas o espaçamento extra ainda permanece.

Como posso torná -lo consistente - ou seja, todas as linhas têm o mesmo espaçamento se elas contêm um <sup> ou não?

Suas soluções devem ser navegadores cruzados (ou seja, 6+, FF, Safari, Opera, Chrome)

Answer 1

A altura da linha conserta, mas você pode ter que torná-lo bastante grande: nas minhas sedimentadas, tenho que aumentar a altura da linha para cerca de 1,8 antes do <sup> Não interfere mais, mas isso varia de fonte para fonte.

Uma abordagem possível para obter alturas de linha consistentes é definir seu próprio estilo de superscrito em vez do padrão vertical-align: super. Se você usar top Não adicionará nada à caixa de linha, mas pode ser necessário reduzir ainda mais o tamanho da fonte para ajustá -la:

sup { vertical-align: top; font-size: 0.6em; }

Outro hack que você pode tentar é usar o posicionamento para movê -lo um pouco sem afetar a caixa de linha:

sup { vertical-align: top; position: relative; top: -0.5em; }

É claro que isso corre o risco de colidir com a linha acima se você não tiver altura de linha suficiente.

Answer 2

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

O truque é definir o <sup>A altura da linha para 0. @Scott disse usar o normal, mas isso nem sempre funciona.

Isso significa você Não tem que mudar A altura da linha do texto circundante para acomodar o texto sobrescrito. Eu testei isso no IE7+ e nos outros grandes navegadores.

Answer 3

Eu tive o mesmo problema e não das respostas dadas funcionou. Mas eu encontrei um Git Commit com uma correção que funcionou para mim:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

Mantenha -o fácil:

sup { vertical-align: text-top; }

[tamanho da fonte dependente do seu tipo de tipo individual

Answer 5

Eu prefiro usar length no alinhamento vertical. Isso alinha a linha de base do elemento no comprimento dado acima da linha de base de seus pais.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 6

A razão pela qual <sup> A tag está afetando o espaçamento entre duas linhas tem a ver com vários fatores. Os fatores são: altura da linha, tamanho do superestrito em relação à fonte regular, a altura da linha do superscript e por último, mas não menos importante de texto regular para estar em uma "banda de túnel" (é assim que eu chamo) de 135%, depois o texto regular (o 100%) fica branco acolchoado por 35% de mais branco. Para um parágrafo, isso se parece com o seguinte:

 p
    {
            line-height: 135%;
    }

Se você não faz o Pad White o Superscript ... (ou seja, mantenha a altura da linha para 0) O Superscript tem apenas a largura de seu próprio texto ... se você pedir ao Superscript que seja uma porcentagem da fonte regular (para Exemplo 70%) e você o alinha com o meio do texto regular (texto-médio), você pode eliminar o problema e obter um sobrescrito que se parece com um sobrescrito. Aqui está:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 7

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Answer 8

Para fazer todas as linhas mais alto, para parecer o mesmo que a linha com o superscription, defina um maior line-height Para todo o parágrafo

<p style='line-height:150%'>

Ou qualquer valor que dê o efeito que você deseja.

Pode parecer estranho, mas é assim que você descreveu seus requisitos.

Editar: para fazer com que todas as linhas pareçam iguais Quando apenas um precisa de mais espaço vertical do que os outros, Todas as linhas no parágrafo terão que ser mais altas.

Isso, como eu disse, pode não uma solução atraente. Talvez algo possa ser feito com uma extensão, fazendo apenas o texto com o sub -descritivo menor, além disso, não acredito que o que você quer pode ser alcançado. Mas eu gostaria de ver a solução de outra pessoa.

Edit2: Aliás, eu tentei um pequeno arquivo HTML contendo

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

E as linhas são a mesma altura em FF3.0.14 e KonQueror (não posso falar por outros navegadores)

Answer 9

Eu tenho usado altura de linha: Normal para o Superscript, que funciona bem para mim no Safari, Chrome e Firefox, mas não tenho certeza sobre o IE.

Answer 10

Use especialmente isso no boletim informativo -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer 11

Eu gosto da solução de Milingu Kilu, mas no mesmo espírito eu prefiro

sup { vertical-align:top; line-height:100%; }

Answer 12

¹, ² etc. podem fazer o truque. É um truque HTML para substituir

Answer 13

Resposta de aqui, trabalha em ambos os Phantomjs e em HTML embebido em e-mail:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>