Trabalhando com preenchimento (padding) em CSS

Nós já vimos a propriedade margin, que cria uma margem para fora da borda. Existe também uma propriedade muito similar, padding, que cria um preenchimento para dentro da borda.

Vamos agora ver com exemplos como esta propriedade funciona. Primeiro, eis um bloco sem preenchimento (o texto está colado nas bordas):

html<div id="elem">
  some long text
</div>

css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

E agora vamos definir padding de 30px para todos os lados:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: