Trabalhando com preenchimento (padding) em CSS
Suponha que definimos uma largura de
100px para um elemento. No CSS, isso não significa
que o elemento realmente terá uma largura de
100px. O fato é que a adição de
padding expande o elemento e ele se torna
maior do que o especificado na propriedade width.
Vamos ver um exemplo. Vamos criar dois
blocos e definir a largura para 100
pixels. No entanto, vamos definir
padding para o segundo bloco,
e para o primeiro - não. Como resultado,
o segundo bloco será maior pelo tamanho do preenchimento:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* define o preenchimento */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
