
Los padding en CSS en forma abreviada de propiedad establecerá el relleno en los cuatro extremos de un elemento, y esta propiedad puede ser utilizada en lugar de establecer los acolchados individuales con padding-top
, padding-right
, padding-bottom
y padding-left
.
Funciones padding css
Valor inicial | Para cada función corta: 1- padding-bottom : 0. 2- padding-left : 0. 3- padding-right : 0. 4- padding-top : 0 . |
---|---|
Aplicado a | Todos los elementos, excepto los elementos de la tabla en los que el valor de la propiedad no es igual a display una de las palabras reservadas table-caption , table y inline-table . |
Heredable | No |
Móvil | Sí |
Valor calculado | Un porcentaje o longitud absoluta. |
/* relleno en los cuatro lados */ padding : 1em ; /* vertical | horizontal */ padding : 5% 10%; /* arriba | horizontal | fondo */ padding : 1em 2em 2em ; /* arriba | derecha | abajo | izquierda */ padding : 5px 1em 0 1em ; /* valores globales */ padding: inherit; padding: initial; padding: unset;
Ejemplos y aplicaciones en código
Para establecer notas al pie hasta 7%
el ancho del elemento de bloque que contiene el elemento de destino:
padding: 7%;
Para establecer las notas al pie en todos los lados para 12px
:
padding: 12px;
Para establecer las notas al pie en los extremos superior e inferior de 1.5em
, y los extremos izquierdo y derecho en 23px
, usaremos la regla:
padding: 1.5em 23px;
Para establecer las notas al pie en el extremo superior 9px
, el extremo inferior en 3em
y los extremos izquierdo y derecho en 5%
, usaremos la regla:
padding: 9px 5% 3em;
La propiedad padding se puede utilizar para ajustar los valores de la padding-top
, padding-right
, padding-bottom
y padding-left
todos los atributos de la regla es:
padding: 12px 5px 23px 8px;
Las siguientes reglas son equivalentes:
padding-top: 12px; padding-right: 5px; padding-bottom: 23px; padding-left: 8px;
Tenga en cuenta la cantidad de espacio de anotación entre el marco y el contenido.
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4.0 | 3,5 | 1.0 |
Características generales
La propiedad acepta padding
uno, dos, tres o cuatro valores, y cada valor puede ser una longitud <length>
o un porcentaje <percentage>
.
- Cuando se especifica un solo valor, se aplicará a todos los lados.
- Cuando se especifican dos valores, el primer valor se aplicará a los extremos superior e inferior, y el segundo valor a los extremos izquierdo y derecho.
- Se especifican tres valores, el primer valor se aplicará al extremo superior, el segundo valor a los extremos izquierdo y derecho y el tercer valor al extremo inferior.
- Cuando se especifican cuatro valores, los valores se aplicarán al extremo superior, luego al lado derecho, luego al inferior y luego al izquierdo, respectivamente (es decir, la rotación comienza desde el extremo superior y continúa en el sentido de las agujas del reloj).
<length>
Determine el valor de la nota al pie en longitudes absolutas, y el valor no puede ser negativo.
<percentage>
Especifica el valor de la nota al pie como un porcentaje del ancho del elemento de bloque que contiene el elemento actual, y el valor no puede ser negativo.
Estructura padding css
padding: [ <length> | <percentage> ]{1,4};
Consultar también
- La página de sub-propiedades que los conjuntos de atributos de relleno son:
padding-top
,padding-bottom
,padding-right
ypadding-left
. - En la página de propiedades
margin
establece los márgenes en los cuatro extremos del elemento. - La página de propiedades
position
que describe cómo se debe colocar el elemento en el documento.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS