Estoy intentando entender la diferencia entre entre margin-left, y position: absolute y left en css. Entiendo que la primera le da márgenes a un elemento, y la segunda lo posiciona respecto a a su contenedor (?). Pero me cuesta interpretar eso. Hice un pequeño ejemplo usando ambas opciones (y bootstrap, porque lo venía usando y no sé si puede llegar a influir):
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="estilos3.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container borde-container">
<div class="row borde-fila">
<div class="d-none d-lg-block col-lg-3 text-center borde-columna">
<div class="imagen borde-imagen">
</div>
</div>
<div class="texto-encabezado col-lg-6 text-center borde-columna">
<h1>Texto en el encabezado</h1>
<h2>y un poco más de texto, no tan importante</h2>
</div>
<div class="d-none d-lg-block col-lg-3 text-center borde-columna">
<div class="imagen2 borde-imagen">
</div>
</div>
</div>
</div>
</header>
<body>
el cuerpo de la página.
</body>
css:
header{
background-color: lightgoldenrodyellow;
}
.texto-encabezado{
padding-top: 30px;
padding-bottom: 15px;
}
.borde-container{
border: 2px solid red;
}
.borde-fila{
border: 2px solid grey;
}
.borde-imagen{
border: 3px solid blue;
}
.borde-columna{
border: 3px solid green;
}
.imagen{
background-color: black;
position: absolute;
top: 5px;
left: 15px;
/*margin-top: 5px;
margin-left: 15px;*/
padding-top: 15px;
padding-bottom: 15px;
height: 180px;
width: 230px;
}
.imagen2{
background-color: black;
/*position: absolute;
top: 5px;
left: 15px;*/
margin-top: 5px;
margin-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
height: 180px;
width: 230px;
}
En la primera "imagen", los 15px arrancarían a partir del borde del div padre, verdad? Y en la segunda no me queda tan claro. ¿se desplzaría 15px hacia la izquierda a partir de una posición centrada?
Gracias!