CSS
Relleno
Buscar..
Sintaxis
- relleno: longitud | inicial | heredar | unset;
- padding-top: length | initial | inherit | unset;
- padding-right: length | initial | inherit | unset;
- padding-bottom: length | initial | inherit | unset;
- padding-left: length | initial | inherit | unset;
Observaciones
1 : https://developer.mozilla.org/en/docs/Web/CSS/padding MDN
También vea esta pregunta , "¿Por qué CSS no admite el relleno negativo?" y sus respuestas.
También considere el modelo de caja cuando use relleno. Dependiendo del valor del tamaño de la caja, el relleno en un elemento puede agregarse a la altura / anchura previamente definida de un elemento o no.
Propiedades relacionadas:
El relleno en los elementos en línea solo se aplicará a la izquierda y derecha del elemento, y no a la parte superior e inferior, debido a las propiedades de visualización inherentes de los elementos en línea.
Relleno en un lado dado
La propiedad de relleno establece el espacio de relleno en todos los lados de un elemento. El área de relleno es el espacio entre el contenido del elemento y su borde. No se permiten valores negativos.
Puedes especificar un lado individualmente:
-
padding-top -
padding-right -
padding-bottom -
padding-left
El siguiente código agregaría un relleno de 5px a la parte superior de la división:
<style>
.myClass {
padding-top: 5px;
}
</style>
<div class="myClass"></div>
Relleno de taquigrafía
La propiedad de relleno establece el espacio de relleno en todos los lados de un elemento. El área de relleno es el espacio entre el contenido del elemento y su borde. No se permiten valores negativos.
Para guardar la adición de relleno a cada lado individualmente (usando padding-top , padding-left etc.) puede escribirlo como una taquigrafía, como se muestra a continuación:
Cuatro valores :
<style>
.myDiv {
padding: 25px 50px 75px 100px; /* top right bottom left; */
}
</style>
<div class="myDiv"></div>
Tres valores :
<style>
.myDiv {
padding: 25px 50px 75px; /* top left/right bottom */
}
</style>
<div class="myDiv"></div>
Dos valores :
<style>
.myDiv {
padding: 25px 50px; /* top/bottom left/right */
}
</style>
<div class="myDiv"></div>
Un valor :
<style>
.myDiv {
padding: 25px; /* top/right/bottom/left */
}
</style>
<div class="myDiv"></div>
