Web.CSS.Rellenos.
Published in
2 min readAug 25, 2016
Los márgenes crea un espacio alrededor de un elemento HTML, pues el relleno hace todo lo contrario, es decir, crea espacios dentro del elemento, en el contenido.
Rellenos individuales.
Aquí se controlará por partes el relleno de cada lado del elemento. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Relleno Individual.</h2>
<div>Es un texto de ejemplo para ver los resultados.</div
</body>
</html>En este ejemplo tenemos un bloque <div> con un estilo determinado con un relleno distinto a cada lado del elemento:
- padding-top: 50px; Relleno superior.
- padding-right: 30px; Relleno derecho.
- padding-bottom: 50px; Relleno inferior.
- padding-left: 80px; Relleno izquierdo.
Todos los lados en una misma instrucción.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding: 50px 30px 50px 80px;
}
</style>
</head>
<body>
<h2>Todo en una misma instrucción.</h2>
<div>Esto es un texto para ver los resultados.</div>
</body>
</html>Aquí se hace lo mismo en el ejemplo anterior, la diferencia está en que se hace en una misma instrucción y que el orden de los lados es distinto; relleno superior, derecho, abajo e izquierdo.
La propiedad margin puede tomar los siguientes valores:
- padding: 25px 50px 75px 100px; Si se especifica 4 valores se refiere a relleno superior, derecho, abajo e izquierdo.
- padding: 25px 50px 75px; Si son solo 3 valores se refiere a el primer valor es relleno superior, el segundo valor relleno derecho e izquierdo y el último relleno inferior.
- padding: 25px 50px; El primer valor es el relleno superior e inferior y el último relleno derecho e izquierdo.
- padding: 25px; Si sólo se especifica un valor quiere decir que todos los lados tendrán el mismo valor de relleno.
