CSS: propiedad de relleno

0

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de relleno

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada relleno Con sintaxis y ejemplos.

describir

La propiedad de relleno CSS define el espacio de relleno en todos los lados de un elemento.

sintaxis

La propiedad de relleno CSS se puede representar mediante uno, dos, tres o cuatro de los valores proporcionados. Cada valor se puede expresar como un valor fijo o como un porcentaje.

un valor

La sintaxis de la propiedad de relleno CSS (valor 1) es:

padding: all;

Cuando se proporciona un solo valor, el valor de relleno se aplicará a los cuatro lados del elemento (es decir, arriba, derecha, abajo, izquierda).

dos valores

La sintaxis de la propiedad de relleno CSS (con 2 valores) es:

padding: top_bottom left_right;

Cuando se proporcionan dos valores, el primer valor se aplicará a la parte superior e inferior del elemento. El segundo valor se aplicará a los lados izquierdo y derecho del elemento.

tres valores

La sintaxis para la propiedad de relleno CSS (con 3 valores) es:

padding: top right_left bottom;

Cuando se proporcionan tres valores, el primer valor se aplicará a la parte superior del elemento. El segundo valor se aplicará a la derecha ya la izquierda del elemento. El tercer valor se aplicará a la parte inferior del elemento.

cuatro valores

La sintaxis de la propiedad de relleno CSS (con 4 valores) es:

padding: top right bottom left;

Cuando se proporcionan cuatro valores, el primer valor se aplicará a la parte superior del elemento. El segundo valor se aplicará al lado derecho del elemento. El tercer valor se aplicará a la parte inferior del elemento. El cuarto valor se aplicará al lado izquierdo del elemento.

Los valores de relleno superior, derecho, inferior e izquierdo pueden ser uno de los siguientes:

valor describir
estable valor fijo en px, em, …
div { relleno: 5px; }
div { relleno: 4em 5px; }
div { relleno: 2px 5px 10px; }
div {relleno: 4px 5px 2px 3px; }
porcentaje valor porcentual
div { relleno: 8%; }
div { relleno: 4% 5%; }
div {relleno: 2% 5% 8%; }
div {relleno: 4% 5% 2% 3%; }
fijo y porcentaje
(conjunto)		 Una combinación de valores fijos y porcentuales
div { relleno: 4% 5px; }
div { relleno: 2em 5% 8px; }
div { relleno: 4px 5em 2% 3px; }
heredar El elemento heredará el relleno de su elemento principal
div { relleno: heredar; }

notas

  • Cada valor en la propiedad de relleno CSS se puede expresar como un valor fijo o como un porcentaje.
  • Puede combinar valores fijos y porcentuales en las propiedades de relleno de CSS.
  • No se permiten valores negativos en las propiedades de relleno de CSS.
  • Cuando el valor se proporciona como un porcentaje, es relativo al ancho del bloque que lo contiene.
  • Véase también padding-top, padding-bottom, padding-left y padding-right.

Compatibilidad del navegador

La propiedad de relleno CSS tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • androide
  • Firefox (Geco)
  • Firefox móvil (Geco)
  • Navegador de Internet (IE)
  • es decir, móvil
  • ópera
  • Ópera Móvil
  • Safari (WebKit)
  • Safari para móvil

ejemplo

Discutiremos la propiedad de relleno a continuación, explorando ejemplos de cómo usar esta propiedad para 1, 2, 3 o 4 valores en CSS (ya sea como un valor fijo o como un porcentaje).

usar valor fijo

Veamos un ejemplo de relleno CSS, donde proporcionamos un valor representado como un valor fijo.

div { padding: 5px; }

En este ejemplo de relleno CSS, proporcionamos un valor de 5px que se aplicará a los 4 lados del elemento.

A continuación, veremos un ejemplo de relleno CSS en el que proporcionamos dos valores representados como valores fijos.

div { padding: 5px 10em; }

En este ejemplo de relleno CSS, proporcionamos dos valores. El primer valor de 5px se aplicará a la parte superior e inferior del elemento. El segundo valor, 10em, se aplicará a los lados izquierdo y derecho del elemento.

A continuación, veremos un ejemplo de relleno de CSS en el que proporcionamos tres valores representados como valores fijos.

div { padding: 5px 10px 15px; }

En este ejemplo de relleno CSS, proporcionamos tres valores. El primer valor de 5px se aplicará a la parte superior del elemento. El segundo valor de 10px se aplicará a los lados derecho e izquierdo del elemento. Se aplicará un tercer valor de 15 px en la parte inferior del elemento.

A continuación, veremos un ejemplo de relleno de CSS en el que proporcionamos cuatro valores representados como valores fijos.

div { padding: 5px 10px 12px 8px; }

En este ejemplo de relleno CSS, proporcionamos cuatro valores. El primer valor de 5px se aplicará a la parte superior del elemento. El segundo valor de 10px se aplicará al lado derecho del elemento. Se aplicará un tercer valor de 12 px en la parte inferior del elemento. Se aplicará un cuarto valor de 8px al lado izquierdo del elemento.

porcentaje de uso

Veamos un ejemplo de relleno CSS en el que proporcionamos un valor expresado como porcentaje.

div { padding: 2%; }

En este ejemplo de relleno CSS, proporcionamos un valor del 2 %, que se aplicará a los 4 lados del elemento.

A continuación, veremos un ejemplo de relleno CSS en el que proporcionamos dos valores expresados ​​como porcentajes.

div { padding: 5% 10%; }

En este ejemplo de relleno CSS, proporcionamos dos valores. El primer valor del 5% se aplicará a la parte superior e inferior del elemento. El segundo valor del 10 % se aplicará a los lados izquierdo y derecho del elemento.

A continuación, veremos un ejemplo de relleno CSS en el que proporcionamos tres valores expresados ​​como porcentajes.

div { padding: 2% 5% 10%; }

En este ejemplo de relleno CSS, proporcionamos tres valores. El primer valor del 2% se aplicará a la parte superior del elemento. El segundo valor del 5% se aplicará a los lados derecho e izquierdo del elemento. Se aplicará un tercer valor del 10 % en la parte inferior del elemento.

A continuación, veremos un ejemplo de relleno de CSS en el que proporcionamos cuatro valores expresados ​​como porcentajes.

div { padding: 5% 10% 2% 8%; }

En este ejemplo de relleno CSS, proporcionamos cuatro valores. El primer valor del 5% se aplicará a la parte superior del elemento. El segundo valor del 10 % se aplicará al lado derecho del elemento. Se aplicará un tercer valor del 2% en la parte inferior del elemento. Se aplicará un cuarto valor del 8% al lado izquierdo del elemento.