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):
<div id="elem">
some long text
</div>
#elem {
width: 300px;
border: 1px solid red;
text-align: justify;
}
:
E agora vamos definir padding de 30px
para todos os lados:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid red;
text-align: justify;
}
:
