Los márgenes en CSS

Márgenes

CSS : Aquí, vamos a aprender acerca de las propiedades de los márgenes en CSS (Cascading Style Sheet) .

propiedad margin CSS

márgenes CSS se utilizan para el espacio alrededor de cualquier elemento, class ello se utilizan propiedad “margen” en el CSS .

Sintaxis:

    Element{
margin: length|auto|initial|inherit;
}

Margen Collapsing

Cuando dos márgenes se tocan entre sí verticalmente, que se colapsan. Pero cuando tocan horizontalmente, que no colapsen.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
div {
margin: 20px;
}
</style>
</head>
<html>
<body>
<div>
Some content
</div>
<div>
Some more content
</div>
</body>
</html>

salida

Margins in CSS - 4

Serán 20 píxeles aparte ya que los márgenes verticales colapsan más de una y otra. (La separación no será la suma de los dos márgenes.)

Aplicar Margen sobre un lado dado

En CSS puede especificar un lado determinado a aplicar un margen demasiado. Las cuatro propiedades proporcionadas for este fin son,

  • margen-izquierda
  • margen derecha
  • margin-top
  • margen-inferior

Ejemplo:

<!DOCTYPE html>
<head>
<style>
#myDiv {
margin-left: 30px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<html>
<body>
<div id="myDiv">
Some content
</div>
</body>
</html>

salida

Margins in CSS - 5

márgenes negativos

CSS tiene propiedades que pueden ajustarse a valores negativos. Esta propiedad se puede utilizar para solapar elementos sin posicionamiento absoluto.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
.over {
margin-left: -20px;
background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<div class="over">
Some content
</div>
</body>
</html>

salida

Margins in CSS - 6

propiedad Margen simplificación

Aquí la abreviatura se utiliza para especificar los márgenes en todas direcciones sin tener que escribir class todas las direcciones.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
margin: 1px;

background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>
Some content
</p>
</body>
</html>

salida

Margins in CSS - 7

CSS for margen: longitud | auto | iniciales | heredan

    margin: 1px;
margin: 1px 1px;
margin: 1px 1px 1px;
margin: 1px 1px 1px 1px;

Izquierda, Derecha, márgenes superior e inferior

para proporcionar márgenes class la izquierda, derecha, arriba y abajo a un objeto, podemos utilizar margen-izquierda , margen derecha , propiedades de margen-inferior margin-top y respectivamente.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 30px;

background-color: #f40;
color: #fff;
}
</style>
</head>
<html>
<body>
<p>This is line One.</p>
<p>This is line Two.</p>
<p>This is line Three.</p>
<p>This is line Four.</p>
</body>
</html>

salida

Margins in CSS - 8


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *