As propriedades CSS Text-indent e Line-height 
Text-indent
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relação à largura do elemento que contém o seletor. Pode ser a largura total da página, a largura da célula de uma tabela, etc.
A propriedade text-indent se aplica a elementos de bloco e realiza a endentação da primeira linha. A sua sintaxe é:
text-indent: comprimento
text-indent: porcentagem
A porcentagem ocorre em relação à largura do elemento que contém o seletor. Pode ser a largura total da página, a largura da célula de uma tabela, etc.
Exemplos:
<html>
<head>
<style type="text/css">
<!--
h3 {text-indent: 90px;}
p {text-indent: 1em;}
-->
</style>
</head>
<body>
<h3>Texto com recuo de70 pixel</h3>
<p>Texto com recuo de 1.0em</p>
</body>
</html>
<html>
<head>
<style type="text/css">
<!--
h3 {text-indent: 90px;}
p {text-indent: 1em;}
-->
</style>
</head>
<body>
<h3>Texto com recuo de70 pixel</h3>
<p>Texto com recuo de 1.0em</p>
</body>
</html>
Veja como fica:
A endentação tratada aqui é apenas para uma linha de texto. Para endentar blocos inteiros, deve-se usar as margens (em seção mais a frente).
line-height
Este atributo é usado para controlar o espaço que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se você tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2), haverá 5 pontos antes e 5 pontos depois de cada linha de texto (espaço du-plo). O espaço simples equivale geralmente a line-height:
120%. Uma line-height menor que o tamanho da fonte produzirá sobreposição de texto.
Embora ambos os browsers mais populares suportem este recurso, ele não ocorre da maneira correta. Os browsers não acrescentam a mesma quantidade de espaço antes e depois como esperado.
Um bug no Internet Explorer 3 faz com que ele interprete valores absolutos (sem unidade) como valores em pixels. Por exemplo, 1.5 indica espaço 1 e meio ou 150%. No Internet Explorer 3 as linhas ficam sobrepostas pois o browser interpreta a unidade como 1.5 pixels. Evite, portanto, usar valores absolutos (use porcentagens).
A sintaxe é:
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
Exemplos:
<html>
<head>
<style type="text/css">
<!--
h1 {line-height: 0;}
h2 {line-height:2;}
h3 {line-height: 1,8em;}
h4 {line-height:150%;}
-->
</style>
</head>
<body>
<h1>
<p>Texto com line-height: 0;</p>
<p>Texto com line-height: 0;</p>
<p>Texto com line-height: 0;</p>
</h1>
<h2>
<p>Texto com line-height:2</p>
<p>Texto com line-height:2</p>
<p>Texto com line-height:2</p>
</h2>
<h3>
<p>Texto com line-height:1,8em</p>
<p>Texto com line-height:1,8em</p>
<p>Texto com line-height:1,8em</p>
</h3>
<h4>
<p>Texto com line-height:150%</p>
<p>Texto com line-height:150%</p>
<p>Texto com line-height:150%</p>
</h4>
</body>
</html>
A endentação tratada aqui é apenas para uma linha de texto. Para endentar blocos inteiros, deve-se usar as margens (em seção mais a frente).
line-height
Este atributo é usado para controlar o espaço que existe antes e depois de uma linha de texto. Ela especifica a altura total de uma linha de texto. Se você tem um texto de 10 pontos e uma line-height de 20 pontos (line-height: 2), haverá 5 pontos antes e 5 pontos depois de cada linha de texto (espaço du-plo). O espaço simples equivale geralmente a line-height:
120%. Uma line-height menor que o tamanho da fonte produzirá sobreposição de texto.
Embora ambos os browsers mais populares suportem este recurso, ele não ocorre da maneira correta. Os browsers não acrescentam a mesma quantidade de espaço antes e depois como esperado.
Um bug no Internet Explorer 3 faz com que ele interprete valores absolutos (sem unidade) como valores em pixels. Por exemplo, 1.5 indica espaço 1 e meio ou 150%. No Internet Explorer 3 as linhas ficam sobrepostas pois o browser interpreta a unidade como 1.5 pixels. Evite, portanto, usar valores absolutos (use porcentagens).
A sintaxe é:
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
Exemplos:
<html>
<head>
<style type="text/css">
<!--
h1 {line-height: 0;}
h2 {line-height:2;}
h3 {line-height: 1,8em;}
h4 {line-height:150%;}
-->
</style>
</head>
<body>
<h1>
<p>Texto com line-height: 0;</p>
<p>Texto com line-height: 0;</p>
<p>Texto com line-height: 0;</p>
</h1>
<h2>
<p>Texto com line-height:2</p>
<p>Texto com line-height:2</p>
<p>Texto com line-height:2</p>
</h2>
<h3>
<p>Texto com line-height:1,8em</p>
<p>Texto com line-height:1,8em</p>
<p>Texto com line-height:1,8em</p>
</h3>
<h4>
<p>Texto com line-height:150%</p>
<p>Texto com line-height:150%</p>
<p>Texto com line-height:150%</p>
</h4>
</body>
</html>
Resultado:
Se você usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou uma unidade menor que o tamanho da fonte, haverá sobreposição de linhas.
Se você usar um valor percentual menor que 100%, um valor absoluto menor que 1 ou uma unidade menor que o tamanho da fonte, haverá sobreposição de linhas.
| < Anterior | Próximo > |
|---|
