1

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!

2 respuestas 2

1

margin-left: sería el espacio hacia el exterior desde el borde del elemento, mientras left, seria un espacio a la izquierda, desde el contenedor del elemento al que estas aplicando la regla, se ve mejor con un ejemplo:

body {
  font-family: Arial, Helvetica, sans-serif;
}

.parent {
  width: 100%;
  height: 100vh;
  background: green;
  position: relative;
}

.child {
  background: orange;
  left: 15px;
  margin: 15px;
  position: absolute;
}

.grand-child {
  margin: 15px;
  background: yellow;
  padding: 15px;
}
<div class="parent">
  <div class="child">
    <div class="grand-child">
      Some content
    </div>
  </div>
</div>

El elemento parent contiene a child y grand-child, child tiene un margen en todas direcciones de 15px, pero ademas un left (espaciado) a la izquierda, partiendo del borde del contenedor de child, en este caso parent, grand-child a su vez tiene margen en todas direcciones, hacia el exterior y a partir del borde de si mismo, como margin crea un espaciado alrededor del elemento, es posible ver el color de fondo de los elementos.

Puedes leer un poco mas del modelo de caja de CSS por aca: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/The_box_model

1

Usando márgenes y posición absoluta con las mismas medidas, el elemento se posiciona igual respecto al padre, pero... con algunas diferencias:

  • El elemento que tiene posición absoluta, sale del flujo y el contenedor no se adapta a las medidas de este
  • El elemento con posición absoluta, aparecerá en función de la posición del primer ancestro que no tenga posición estática, es decir, solo relativa o absoluta, no recuerdo si también aplica a posición fija
  • Si todos los ancestros tienen posición estática, entonces el elemento con posición absoluta se posicionará respecto al cuerpo de la página

.borde-imagen{
    /* Evitar que el hijo se posicione respecto al cuerpo de la página */
    position:relative;
    border: 3px solid blue;
    /* Solo para ver el comportamiento de posición absoluta */
    min-height: 100px;
}
.imagen{
    background-color: #f60;
    position: absolute;
    top: 5px;
    left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 180px;
    width: 230px;
}
.imagen2{
    background-color: #0ff;
    margin-top: 5px; 
    margin-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 180px;
    width: 230px;
}

.borde-normal{
    border: 3px solid red;
    /* Solo para ver el comportamiento de posición absoluta */
    min-height: 100px;
}
.imagen3{
    background-color: #ff0;
    position: absolute;
    top: 5px;
    left: 150px;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 180px;
    width: 230px;
}
<div class="borde-imagen">
    <div class="imagen2">Posicionado por el flujo normal</div>
</div>
<div class="borde-imagen">
    <div class="imagen">Posicionado respecto al contenedor padre</div>
</div>
<div class="borde-normal">
    <div class="imagen3">Posicionado respecto al cuerpo de la página</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.