
Los padding
CSS en forma abreviada de propiedad establecerá el relleno en los cuatro extremos de un elemento. Esta propiedad se puede utilizar en lugar de establecer los acolchados individuales con padding-top
, padding-right
, padding-bottom
y padding-left
.
Funciones del Padding
Valor inicial | Para cada función corta: padding-bottom : padding-left : padding-right : padding-top : |
---|---|
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 | Si |
Valor calculado | Un porcentaje o longitud absoluta. |
/* padding en los cuatro lados */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 1em; /* <em>valores globales</em> */ padding: inherit; padding: initial; padding: unset;
Ejemplos del Padding en CSS
Para establecer notas al pie hasta 5%
el ancho del elemento de bloque que contiene el elemento de destino:
padding : 5 %;
Para establecer las notas al pie en todos los lados para 10px
:
padding : 10px ;
Para establecer las notas al pie en los extremos superior e inferior de 1.6em
, y los extremos izquierdo y derecho en 20px
, usaremos la regla:
padding : 1 . 6em 20px ;
Para establecer las notas al pie en el extremo superior 10px
, el extremo inferior en 1em
y los extremos izquierdo y derecho en 3%
, usaremos la regla:
padding : 10px 3 % 1em ;
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 : 10px 3px 30px 5px ;
Las siguientes reglas son equivalentes:
padding-top : 10px ; padding-right : 3px ; padding-bottom : 30px ; padding-left : 5px ;
Tenga en cuenta la cantidad de espacio de anotación entre el marco y el contenido.
Soporte padding en los navegadores
Característica | Chrome | Firefox | Internet Explorer | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 1.0 | 4.0 | 3,5 | 1.0 |
Funcionamiento general del padding en CSS
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.
- Cuando 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 formal
padding : [ < length > | < percentage > ] { 1,4 } ;
- Múltiples Constantes en TypeScript
- Estructura de Datos las Colas
- Estructura de Datos las Pilas (Stack)
- Widget Drawer en Flutter
- Clase Scaffold en Flutter
- Estructura del lenguaje Python
- Iteradores y generadores en TypeScript
- Símbolo en TypeScript (Symbol)
- Tipos Avanzados en TypeScript
- Tipos de Compatibilidad en TypeScript
- Inferir Tipos en TypeScript
- Tipos Generalizados (Generics) en TypeScript
- Tipos Básicos de Datos en TypeScript
- Interfaces en TypeScript
- Declaración de Variables en TypeScript
- Funciones en TypeScript
- Categorías en TypeScript
- Introducción a TypeScript
- Clase MaterialApp en Flutter
- Clase Container en Flutter
- ¿Qué son los Widgets en Flutter?
- Introducción a la Arquitectura de Aplicaciones con Flutter
- Lista Doblemente Enlazada
- Listas Vinculadas en Estructura de Datos
- Introducción a las Matrices(Arrays)
- Estructuras de Datos en los Algoritmos de Programación
- Expresión const en JavaScript
- Expresión let en JavaScript
- Introducción al Lenguaje de Programación CSS
- Intérprete de Python
- Expresión var en JavaScript
- Expresión try…catch en JavaScript
- Expresión throw en JavaScript
- Continue en JavaScript
- Switch en JavaScript
- Expresiones if…else en JavaScript
- Declaración vacía o empty en JavaScript
- Break en JavaScript
- Sentencia block en JavaScript
- Arguments en JavaScript
- Promise en JavaScript
- Number en JavaScript
- Características JSON en JavaScript