> Faqs > Problema centrado y aplicación de margin en hijo que ajusta también al padre

Problema centrado y aplicación de margin en hijo que ajusta también al padre

Muy buenas, mi problema es el siguiente: He creado un div padre al cual le he asignado un ancho, un alto y he puesto un margin:auto para que quede centrado, dentro de este div padre, hay un div hijo, al cual le he puesto un ancho y un alto, pero cuando al div hijo le pongo margin-top para separarlo un poco, se me desplaza tanto el padre como el hijo hacia abajo cuando en css solo se lo he puesto al div hijo.

Un saludo y gracias

Por cierto, un código fuente también facilita que se entienda el problema y lo que estás haciendo. Para otra vez no estaría mal ponerlo, o puedes editar la pregunta para colocarlo.
Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Es un comportamiento habitual, pero la solución es bien simple: Usa padding en el contenedor padre, en lugar de margin en el hijo. Así te evitas el problema que has descrito, que el margin se aplica al padre y al hijo a la vez. No sé explicar el motivo por el que ocurre, pero como te digo, es algo que ocurre a menudo, en cuyo caso la prácica es usar padding en vez de margin.

De todos modos, otra sugerencia que me gustaría hacerte es que, para hacer un centrado, uses Flexbox, que te facilita mucho la maquetación.

Si tienes un elemento que que tiene que aparecer centrado en su contenedor, entonces usas "display: flex;" y "justify-content: center;".

Te paso un ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Margin centrado con flexbox</title>
  <style>
  .container {
    background-color: brown;
    display: flex;
    justify-content: center;
    height: 600px;
    width: 800px;
  }
  .content {
    background-color: orange;
    margin-top: 15px;
    height: 500px;
    width: 600px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="content"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
    <p>Ex exercitationem quam illum aliquid officiis ea, molestiae, modi sequi sapiente doloribus eveniet, quos natus.</p></div>
  </div>
</body>
</html>
Miguel Angel
1326 59 88 5
Muchas gracias por responder, me resulta incomprensible el problema que tiene html con esto, si sitúo un div dentro de otro, no puede ocurrir que metiendole margin al hijo se mueva todo, pero bueno. Muchas gracias por la solución, espero que me ayude con mi sitio web https://detecthistory.com/es/ Es que ya he tenido varios problemas con eso.

Ese acople de los márgenes entre padre e hijo margin-top tampoco me parece muy claro.

Pero solo se produce cuando el padre no tiene definido un padding-top.

Creo que el motivo es para que, si tanto padre como hijo tienen margen, esos márgenes no se sumen provocando que se dupliquen los espacios.

Lo puedes solucionar también colocando un padding al contenedor padre. Un padding-top de un píxel prácticamente no se notaría y te solucionaría el problema con el margen del contenedor hijo.

Salva
223 3 15 1