Trabajo con relleno padding en CSS
Supongamos que a un elemento le hemos asignado un ancho de
100px. En CSS esto no significa en absoluto
que el elemento realmente tendrá un ancho de
100px. El hecho es que agregar
padding expande el elemento y este se vuelve
más grande de lo especificado en la propiedad width.
Veamos un ejemplo. Creemos dos
bloques a los que les asignaremos un ancho de 100
píxeles. Al mismo tiempo, asignemos
padding al segundo bloque,
y al primero no. Como resultado,
el segundo bloque será más grande por el tamaño del relleno:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* asignamos rellenos */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
