Las propiedades de los márgenes de CSS se utilizan para crear espacio alrededor de los componentes, fuera de los bordes caracterizados. Con CSS, tienes pleno poder sobre los márgenes. Hay propiedades para establecer el borde de cada lado de un componente (superior, derecho, base e izquierdo).
CSS tiene propiedades para indicar el borde de cada lado de un componente.
Todas las propiedades de margen pueden tener los siguientes valores.
- auto: el navegador calcula el margen
- longitud: Especifica un margen en px, pt y cm, etc.
- %: Especifica un margen en % del ancho del elemento contenedor.
- heredar: Especifica que el margen debe ser heredado del elemento padre.
Ejemplo 1: En el siguiente ejemplo, el div HTML se usa para el estilo del párrafo. El ancho del borde será de 5 px con un color azul sólido. El margen del párrafo es de acuerdo con el margen superior de 50 px, el margen derecho de 50 px, el margen inferior de 100 px, el margen izquierdo de 100 px, el color de fondo es rojo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid blue;
margin: 50px 50px 100px 100px;
background-color: red;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<b>Set margin of paragraph element</b>
<div>
When compared with C++, Java codes are generally
more maintainable because Java does not allow many
things which may lead bad/inefficient programming
if used incorrectly. For example, non-primitives
are always references in Java. So we cannot pass
large objects (like we can do in C++) to functions,
we always pass references in Java. One more example, since
there are no pointers, bad memory access is also not possible.
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, el ancho es de 300px, el margen del párrafo será el mismo, y estará en el centro ya que tiene margen: auto. El ancho del borde es de 80 px con color púrpura.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
margin: auto;
border: 80px solid purple;
}
</style>
</head>
<body>
<h2 style="color: green">GeeksforGeeks</h2>
<b>Use of margin:auto</b>
<p>
Python is a high-level, general-purpose and a
very popular programming language. Python programming
language (latest Python 3) is being used in web development,
Machine Learning applications, along with all cutting
edge technology in Software Industry. Python Programming
Language is very well suited for Beginners, also for
experienced programmers with other
programming languages like C++ and Java.
</p>
<div>
This div will be horizontally centered
because it has <i>margin:auto;</i>
</div>
</body>
</html>
Producción:
margen automático
Publicación traducida automáticamente
Artículo escrito por shikharmalik333 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA