Autor: Russ Weakley
URL do original:https://www.maxdesign.com.au/presentation/inline/
Título original: Inline elements and padding
Traduzido com autorização expressa do autor.

Aplicando padding em elementos inline

Publicado em: 29/07/2007

Você já passou pela experiência de aplicar padding para um elemento <li> que tenha sido definido com "display: inline"? Se sim, notou como as coisas não se comportaram conforme você esperava?

No exemplo a seguir os elementos <li> foram definidos para "display: inline" e então foi aplicado um padding de 1em nos quatro lados dos elementos. Lamentavelmente os padding-top e o padding-bottom dos elementos <li> aparentam ter sido ignorados fazendo com que os elementos se sobreponham uns aos outros.

Para entendermos exatamente o que aconteceu precisamos recordar como elementos nível de bloco e elementos inline tratam as propriedades width, height, padding e margins.

Elementos nível de bloco

As especificações do W3C's para as CSS2 definem elementos nível de bloco como elementos contidos no código fonte do documento que são formatados
visualmente como blocos..

Em outras palavras isto significa que elementos nível de bloco são renderizados como se fossem blocos com quebras de linhas tanto antes como depois. São exemplos de elementos nível de bloco os parágrafos, os cabeçalhos, as divs e os blockquotes.

Elementos inline

As especificações do W3C's para as CSS2 definem elementos inline como elementos contidos no código fonte do documento que não criam novos blocos de conteúdo;
o conteúdo flui na mesma linha.

Ou seja, elementos inline são renderizados sem causar quebras de linha antes ou depois. São exemplos de elementos inline emphasis, strong e links.

Dimensões - uma diferença chave entre elementos nível de bloco e elementos inline

Se você definir propriedades dimensionais para um elemento inline notará que algumas destas propriedades serão aplicadas, outras serão parcialmente aplicadas e outras ainda serão simplesmente ignoradas. As mais notáveis destas propriedades são width, height, margin e padding.

A propriedade width e os elementos inline

As especificações do W3C's para as CSS2 dizem que para elementos inline a propriedade 'width' não se aplica.

No exemplo a seguir uma width de 200px foi aplicada ao elemento inline <a>. Como você pode observar, a aplicação de uma largura não teve qualquer efeito no conteúdo em volta:

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

A propriedade height e os elementos inline

As especificações do W3C's dizem que para elementos inline a propriedade 'height' não se aplica, contudo a altura do box será definida
pela propriedade 'line-height'.

No exemplo a seguir uma height de 50px foi aplicada ao elemento inline <a>. Como você pode observar, a aplicação de uma altura não teve qualquer efeito no conteúdo em volta:

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

A propriedade padding e os elementos inline

Definindo padding para os quatro lados de um elemento inline o efeito será aplicado somente nos lados esquerdo e direito, sendo ignorado o padding-top e o padding-bottom.

No exemplo abaixo um padding de 50px foi definido para os quato lados do elemento <a>. Como você pode observar, a aplicação do padding deu-se nos dois lados do elemento mas não se fez sentir acima e abaixo do elemento:

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat

.

A propriedade margin e os elementos inline

Margins se comportam da mesma maneira que o padding para elementos inline. No exemplo abaixo uma margin de 50px foi definida para os quato lados do elemento <a>. Como você pode observar, a aplicação da margin deu-se nos dois lados do elemento mas não se fez sentir acima e abaixo do elemento:

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Mudando para block a propriedade "display" de um elemento inline

É possível alterar a propriedade display para elementos inline fazendo com que eles se comportem como elementos nível de bloco. Isto fará com que eles assumam a aparência de blocos sem contudo alterar sua estrutura.

No exemplo a seguir foi definido "display: block" para o elemento <a>. Ao mudarmos para block a propriedade display de um elemento inline as propriedades width, height, margin e padding serão aplicadas normalmente, como se eles fossem elementos nível de bloco.

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Mudando para inline a propriedade "display" de um elemento nível de bloco

Você pode forçar elementos nível de bloco a serem renderizados como elementos inline. Se um elemento <li> for declarado como "display: inline", as propriedades width, height, padding e margin serão aplicadas como se eles fossem elementos inline.

Foi este comportamento que fez com que os elementos <li> que usamos nos nossos exemplos acima ignorasse padding-top e padding-bottom.

Corrigindo o comportamento de elementos <li> declarados com display "inline"

Existem várias maneiras de corrigir o comportamento. A seguir mostro uma delas:

1^a. etapa

Declare "display: block" para o elemento <li>. Padding é aplicado aos quatro lados do elemento, mas eles se colocam empilhados em blocos na vertical.

2^a. etapa

Declare "float: left" para o elemento <li> e defina uma width para ele - no caso a seguir usei uma width de 11em. Isto fará com que os item da lista se coloquem um ao lado do outro. Se não houver mais lugar para que um item se posicione ao lado do outro na largura definida, o próximo item será posicionado na linha de baixo e assim por diante.