Acolchado - Trucos CSS

Tabla de contenido

La paddingpropiedad en CSS define la parte más interna del modelo de caja, creando espacio alrededor del contenido de un elemento, dentro de los márgenes y / o bordes definidos.

Los valores de relleno se establecen mediante longitudes o porcentajes y no pueden aceptar valores negativos. El valor inicial o predeterminado para todas las propiedades de relleno es 0.

He aquí un ejemplo sencillo:

.box ( padding: 0 1.5em 0 1.5em; )

El ejemplo anterior utiliza la paddingpropiedad abreviada, que acepta hasta cuatro valores, que se muestran aquí:

.box ( padding: || || || )

Si se establecen menos de cuatro valores, los valores faltantes se asumen en función de los definidos. Por ejemplo, los siguientes dos conjuntos de reglas obtendrían resultados idénticos:

.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )

Por lo tanto, si solo se define un valor, esto establece las cuatro propiedades de relleno en el mismo valor:

.box ( padding: 20px; )

Si se declaran tres valores, lo es padding: (top) (left-and-right) (bottom);.

Cualquiera de las propiedades de relleno individuales se puede declarar a mano, en cuyo caso definiría solo un valor por propiedad. Entonces, el ejemplo anterior podría reescribirse de la siguiente manera:

.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )

Cálculos de relleno y ancho de elemento

Si un elemento tiene un ancho especificado, cualquier relleno agregado a ese elemento se sumará al ancho total del elemento. A menudo, este es un resultado no deseado, ya que requiere que se vuelva a calcular el ancho de un elemento cada vez que se ajusta el relleno. (Tenga en cuenta que esto también ocurre con la altura, pero en la mayoría de los casos se prefiere no asignar una altura determinada a un elemento).

Por ejemplo:

.box ( padding: 20px; width: 400px; )

En este ejemplo, aunque el .boxelemento tiene un ancho explícito de 400 px, el ancho real representado del elemento en la página será 440 px. Esto tiene en cuenta no solo el ancho de 400 px, sino también los 20 px del relleno izquierdo y los 20 px del relleno derecho (definido con la abreviatura de relleno en el ejemplo anterior).

Esto sucede para mantener 400 px de espacio de contenido, en lugar de 400 px de ancho total del elemento. Aquí hay un bolígrafo que demuestra esto:

¡Mira este bolígrafo!

Esto ocurre en todos los navegadores en uso, en modo estándar, pero no ocurrirá en IE6 e IE7 en modo peculiaridades (es decir, en páginas mostradas en IE6 o IE7 donde no hay ningún tipo de documento declarado o donde algo más está sucediendo para desencadenar peculiaridades modo).

Para resolver este problema, manteniendo el ancho en 400px sin importar la cantidad de relleno, puede usar la box-sizingpropiedad:

.box ( padding: 20px; width: 400px; box-sizing: border-box; )

Esto hace que el elemento mantenga su ancho mientras aumenta el relleno, disminuyendo así el espacio de contenido disponible. Aquí hay una demostración: