La propriedad padding se usa para crear espacio al rededor del elemento html dentro de los bordes defenidos
Tambien esta propriedad puede tener solo relleno por los lados con las seguientes propriedades:
- padding-top
- padding-right
- padding-bottom
- padding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
- longitud : especifica un relleno en px, pt, cm, etc.
- % - especifica un relleno en % del ancho del elemento contenedor
- heredar: especifica que el relleno se debe heredar del elemento principal
...
Nota para el relleno los numeros negativos estan proibidos, o sea no se pueden usar numeros negativos en los rellenos
Relleno - Propiedad abreviada
Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad
la propriedd padding es una propiedad abreviada para el siguiente individuo propiedades de relleno
- padding-top
- padding-right
- padding-bottom
- padding-left
Si la propriedad padding tiene 4 vvalores
- relleno: 25px 50px 75px 100px;
- el relleno superior es 25px
- el relleno derecho es 50px
- el relleno inferior es 75px
- el relleno izquierdo es 100px
Ejemplo
Utilice la propiedad abreviada padding con cuatro valores:
div { padding: 25px 50px 75px 100px; }
Si el paddingpropiedad tiene tres valores:
Ejemplo
Utilice la propiedad abreviada padding con cuatro valores:
div { padding: 25px 50px 75px; }
Utilice la propiedad abreviada padding con dos valores:
Ejemplo
Utilice la propiedad abreviada padding con cuatro valores:
div { padding: 25px 50px; }
Si el paddingpropiedad tiene un valor:
Ejemplo
Utilice la propiedad abreviada padding con cuatro valores:
div { padding: 25px; }
width and padding
Los valores de ancho y relleno se deben juntar
Ejemplo: si tenemos una area de 300 px y querems un relleno de 50px, entonces la area total sera de 350px
Lo mismo con height (altura)
ejemplo
div { width: 300px; padding: 25px; }
Para mantener la anchura del elemento se utiliza la propriedad box-sizing
Con esta propriedad la anchura se mantiene pero el elemento disminui
codigo
div { width: 300px; padding: 25px; box-sizing: border-box; }
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias