| |
|---|
|
|
El relleno(Padding) se determina del mismo modo que los márgenes. Comparando similitudes y diferencias que tiene respecto a los márgenes
Al igual que en el caso de los márgenes, por defecto, cada capa tiene relleno cero, por lo que para que pueda ser visible debe determinarse su valor en el código CSS.
Al igual que en el caso de los márgenes, el relleno se determina lado por lado, a menos que se emplee el método abreviado, que es igual que el empleado en los márgenes.
Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.
| Propiedades | padding-top, padding-right, padding-bottom, padding-left |
|---|---|
| Valores | unidad de medida | porcentaje | inherit |
| Se aplica a | Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla (excepto table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column)También se aplica a ::primera letra y ::primera línea. |
| Valor inicial | 0 |
| Descripción | Establece cada uno de los rellenos horizontales y verticales de un elemento |
Cada una de estas propiedades establece la separación entre el contenido y los bordes laterales de la caja del elemento:
Figura: Las cuatro propiedades relacionadas con los rellenos
Al igual que con los márgenes, los padding tienen varias propiedades para indicar el relleno de cada zona:
| Propiedad | Valor | Significado |
|---|---|---|
padding-top |
0 | |
Aplica un relleno interior en el espacio superior de un elemento. |
padding-left |
0 | |
Aplica un relleno interior en el espacio izquierdo de un elemento. |
padding-right |
0 | |
Aplica un relleno interior en el espacio derecho de un elemento. |
padding-bottom |
0 | |
Aplica un relleno interior en el espacio inferior de un elemento. |
Como se puede ver en la tabla, por defecto no hay relleno (el relleno está a cero), aunque puede modificarse tanto con las propiedades anteriores como la propiedad de atajo que veremos a continuación.
Atajo: Modelo de cajas
Como sucede con los márgenes, CSS también define una propiedad de tipo "shorthand" llamada padding para establecer los cuatro rellenos de un elemento de forma simultánea.
La propiedad padding es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.
La propiedad padding constituye un atajo para evitar la asignación de cada lado por separado:
padding-top,
padding-right,
padding-bottom,
padding-left.
La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.
Si se quiere establecer el mismo valor para todas las zonas de relleno de un elemento, se podría utilizar la siguiente regla CSS:
Si se quiere establecer el mismo valor para todas las zonas de relleno de un elemento, se podría utilizar la siguiente regla CSS:
div {
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
}
/* Equivalente a paddig: 10px 10px 10px 10px; */
Utilizando la propiedad padding, es posible establecer de forma abreviada el mismo valor a todas las zonas de relleno de un elemento:
div {
padding:10px;
}
/* Aplicando propiedad padding */
La propiedad padding es tan poderosa que permite establecer una, dos, tres o las cuatro zonas de relleno de forma simultánea.
| Propiedad | padding |
|---|---|
| Valores | ( unidad de medida | porcentaje ) {1, 4} | inherit |
| Se aplica a | Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla (excepto table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column)También se aplica a ::primera letra y ::primera línea. |
| Valor inicial | como cada una de las propiedades de la propiedad abreviada (' shorthand '):
|
| Descripción | Establece de forma directa todos los rellenos de los elementos |
La notación Ejemplo: Se aplican las propiedades padding, tomando como referencia la tabla modelo que se suministra a continuación:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium vulputate sapiennec sagittis aliquam malesuada bibendum arcu vitae. Suspendisse faucibus interdum posuere lorem ipsum. Diam in arcu cursus euismod quis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Tortor vitae purus faucibus ornare suspendisse sed. Nunc scelerisque viverra mauris in aliquam sem. Accumsan sit amet nulla facilisi morbi tempus iaculis. Faucibus purus in massa tempor. Tristique magna sit amet purus gravida quis. Placerat duis ultricies lacus sed turpis tincidunt. Vel orci porta non pulvinar neque laoreet. Bibendum arcu vitae purus faucibus ornare suspendisse sed vitae elementum.
Puede verse el efecto poco estético del texto sin las necesarias sangrías que moderen el estilo de la presentación. Es lo que precisamente se corregirá con la aplicación de la propiedad padding, en las cuatro formas en que es posible hacer cambios en el box contenedor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Suspendisse faucibus interdum posuere lorem ipsum. Diam in arcu cursus euismod quis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed risus. Tortor vitae purus faucibus ornare suspendisse sed. Nunc scelerisque viverra mauris in aliquam sem. Accumsan sit amet nulla facilisi morbi tempus iaculis. Faucibus purus in massa tempor. Tristique magna sit amet purus gravida quis. Placerat duis ultricies lacus sed turpis tincidunt. Vel orci porta non pulvinar neque laoreet. Bibendum arcu vitae purus faucibus ornare suspendisse sed vitae elementum {1, 4} de la definición anterior significa que la propiedad padding admite entre uno y cuatro valores, con el mismo significado que el de la propiedad margin.
