En este artículo, aprenderemos sobre las propiedades de margen y relleno de CSS del modelo de caja y comprenderemos su implementación a través del ejemplo.
Márgenes CSS: Los márgenes CSS se utilizan para crear espacio alrededor del elemento. Podemos establecer los diferentes tamaños de márgenes para lados individuales (superior, derecho, inferior, izquierdo).
Las propiedades de margen pueden tener los siguientes valores:
- Longitud en cm, px, pt, etc.
- Ancho % del elemento.
- Margen calculado por el navegador: automático.
Sintaxis:
body
{
margin: size;
}
La propiedad de margen es una propiedad abreviada que tiene las siguientes propiedades de margen individuales:
- margin-top : Se utiliza para establecer el margen superior de un elemento.
- margin-right : Se utiliza para establecer el margen derecho de un elemento.
- margin-bottom : se utiliza para especificar la cantidad de margen que se utilizará en la parte inferior de un elemento.
- margin-left : Se utiliza para establecer el ancho del margen a la izquierda del elemento deseado.
Nota: La propiedad margin permite los valores negativos.
Discutiremos las 4 propiedades secuencialmente.
Si la propiedad margin tiene 4 valores:
margin: 40px 100px 120px 80px;
- arriba = 40px
- derecha = 100px
- abajo = 120px
- izquierda = 80px
Ejemplo : este ejemplo describe la propiedad de margen especificando los cuatro valores.
HTML
<html>
<head>
<style>
p {
margin: 80px 100px 50px 80px;
}
</style>
</head>
<body>
<h1>
GeekforGeeks
</h1>
<p> Margin properties </p>
</body>
</html>
Producción:
Si la propiedad margin tiene 3 valores:
margin: 40px 100px 120px;
- arriba = 40px
- derecha e izquierda = 100px
- abajo = 120px
Ejemplo : este ejemplo describe la propiedad de margen especificando los tres valores.
HTML
<html>
<head>
<style>
p {
margin: 80px 50px 100px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p> Margin properties </p>
</body>
</html>
Salida :
Si la propiedad margin tiene 2 valores:
margin: 40px 100px;
- arriba y abajo = 40px;
- izquierda y derecha = 100px;
Ejemplo : este ejemplo describe la propiedad de margen especificando el valor doble.
HTML
<html>
<head>
<style>
p {
margin: 100px 150px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p> Margin properties </p>
</body>
</html>
Producción:
Si la propiedad de margen tiene 1 valor:
margin: 40px;
- arriba, derecha, abajo e izquierda = 40px
Ejemplo : este ejemplo describe la propiedad de margen especificando el valor único.
HTML
<html>
<head>
<style>
p {
margin: 100px;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p> Margin properties </p>
</body>
</html>
Producción:
Relleno CSS: los rellenos CSS se utilizan para crear espacio alrededor del elemento, dentro de cualquier borde definido. Podemos configurar diferentes rellenos para lados individuales (superior, derecho, inferior, izquierdo). Es importante agregar propiedades de borde para implementar propiedades de relleno.
Las propiedades de relleno pueden tener los siguientes valores:
- Longitud en cm, px, pt, etc.
- Ancho % del elemento.
Sintaxis :
body
{
padding: size;
}
La propiedad abreviada padding CSS se puede usar para especificar el relleno para cada lado de un elemento en el siguiente orden:
- padding-top : se utiliza para establecer el ancho del área de relleno en la parte superior de un elemento.
- padding-right : se utiliza para establecer el ancho del área de relleno a la derecha de un elemento.
- padding-bottom : se utiliza para establecer la altura del área de relleno en la parte inferior de un elemento.
- padding-left : se utiliza para establecer el ancho del área de relleno a la izquierda de un elemento.
Nota: La propiedad padding permite los valores negativos.
Discutiremos todas estas 4 propiedades secuencialmente.
Si la propiedad padding tiene 4 valores:
padding: 40px 100px 120px 80px;
- arriba = 40px
- derecha = 100px
- abajo = 120px
- izquierda = 80px
Ejemplo : este ejemplo describe la propiedad de relleno especificando los 4 valores.
HTML
<html>
<head>
<style>
p {
padding: 80px 100px 50px 80px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
Producción:
Si la propiedad padding tiene 3 valores:
padding: 40px 100px 120px;
- arriba = 40px
- derecha e izquierda = 100px
- abajo = 120px
Ejemplo : este ejemplo describe la propiedad de relleno especificando los 3 valores.
HTML
<html>
<head>
<style>
p {
padding: 80px 50px 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
Producción:
Si la propiedad padding tiene 2 valores:
padding: 100px 150px;
- arriba y abajo = 100px;
- izquierda y derecha = 150px;
Ejemplo : este ejemplo describe la propiedad de relleno utilizando un valor doble.
HTML
<html>
<head>
<style>
p {
padding: 100px 150px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
Producción:
Si la propiedad padding tiene 1 valor:
padding: 100px;
- arriba, derecha, abajo e izquierda = 100px
Ejemplo : este ejemplo describe la propiedad de relleno utilizando un solo valor.
HTML
<html>
<head>
<style>
p {
padding: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Padding properties</p>
</body>
</html>
Producción:
Diferencia entre margen y relleno:
- El margen se usa para crear espacio alrededor de los elementos y el relleno se usa para crear espacio alrededor de los elementos dentro del borde.
- Podemos establecer la propiedad de margen en automático, pero no podemos establecer la propiedad de relleno en automático.
- En la propiedad Margen podemos permitir números negativos o flotantes, pero en el relleno no podemos permitir valores negativos.
- El margen y el relleno apuntan a los 4 lados del elemento. El margen y el relleno también funcionarán sin la propiedad de borde. La diferencia será más clara con el siguiente ejemplo.
Ejemplo : este ejemplo describe las propiedades de margen y relleno alrededor del contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin: 50px;
border: 70px solid green;
padding: 80px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
Padding properties
</h2>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA