an ordinary blog — andr3.net

(there's an english version of this post.)

De certeza que já viram pedaços de texto que têm ou uma cor ou imagem de fundo. É disso que vou falar hoje...

A maior parte das vezes que alguém usa este estilo cai num erro deslize bastante comum. Ao não deixarem espaço entre o contorno lateral do bloco de texto e o próprio texto, cria-se uma sensação de sufoco. Vejam estes exemplos.

Qual destes dois exemplos vos parece mais "confortável"?
Este bloco de texto ou este bloco de texto?

Este ainda é um exemplo melhor uma vez que como o fundo exterior é da cor do texto interior, os limites confundem-se. Assim já fica mais legível.

O código para criar o padding adequado não poderia ser mais simples. Vou aplicar o estilo à classe .highlight.

.highlight {

      padding-left: 3px;

      padding-right: 3px;

}

Ainda pode ser reduzido para padding: 0 3px 0;, se o padding-bottom e o padding-top forem zero. Se não forem, adequem os valores.