CSS - Rellenos
La propiedad padding le permite especificar cuánto espacio debe aparecer entre el contenido de un elemento y su borde:
El valor de este atributo debe ser una longitud, un porcentaje o la palabra heredar . Si el valor es heredado , tendrá el mismo relleno que su elemento padre. Si se usa un porcentaje, el porcentaje es del cuadro contenedor.
Las siguientes propiedades de CSS se pueden utilizar para controlar listas. También puede establecer diferentes valores para el relleno en cada lado del cuadro usando las siguientes propiedades:
los padding-bottom especifica el relleno inferior de un elemento.
los padding-top especifica el relleno superior de un elemento.
los padding-left especifica el relleno izquierdo de un elemento.
los padding-right especifica el relleno derecho de un elemento.
los padding sirve como abreviatura de las propiedades anteriores.
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad padding-bottom
La propiedad padding-bottom establece el relleno (espacio) inferior de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-top
La propiedad padding-top establece el relleno superior (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-left
La propiedad padding-left establece el padding izquierdo (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad padding-right
La propiedad padding-right establece el relleno derecho (espacio) de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>
</html>Producirá el siguiente resultado:
La propiedad de relleno
La propiedad de relleno establece el relleno (espacio) izquierdo, derecho, superior e inferior de un elemento. Esto puede tomar un valor en términos de longitud de%.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>
</html>Producirá el siguiente resultado: