1

Soy nuevo en html, css y en este ejercicio de contenedores. No entiendo por qué en el div con la clase main se aplican bien todos los márgenes menos el de abajo.

He estado buscando varios tutoriales pero la mayoría habla de los márgenes por defecto que tiene el body y cosas del estilo, pero en este ejemplo el contenedor no está ocupando toda la pantalla.

Dejo el código html, css y una foto.

.container {
  background-color: blue;
  width: 1000px;
  height: 500px;
  Display: flex;
}

.main {
  background-color: red;
  width: 70%;
  height: 100%;
  margin: 25px 25px 25px 25px;
}

.article {
  background-color: green;
  height: 100%;
  width: 100%;
}

.image {
  background-color: brown;
  width: 50px;
  height: 50px;
}

.aside {
  background-color: yellow;
  width: 30%;
  height: 100%;
}

.menu {
  background-color: black;
}

h2 {
  background-color: blue;
  width: 50px;
  height: 50px;
}

p {
  background-color: white;
  width: 50px;
  height: 50px;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="container">
    <div class="main">
      <div class="article">
        <div class="image">

        </div>
        <h2></h2>
        <p></p>
      </div>
    </div>
    <div class="aside">
      <div class="menu"></div>
      <div class="menu"></div>
    </div>
  </div>
</body>

</html>

introducir la descripción de la imagen aquí

1
  • 2
    Moví tu código a un snippet (se agrega con el botón que indica <>, al lado del botón de imagen.) Ya que se trata de HTML + CSS, puede reproducirse el problema en la pregunta misma.
    – padaleiana
    Commented el 13 sept. 2022 a las 18:33

1 respuesta 1

1

En realidad si se están aplicando todos los márgenes al div de clase "mian", el detalle es que no lo puedes ver porque hay una superposición del div "main" sobre el div ".container", esto debido a que al div ".container" le estás colocando una altura fija de 500px y posteriormente le estás diciendo al div de clase ".main" que ocupe el 100% altura, es decir que ocupe lo 500px de su contenedor padre que es ".container" y además de esto tenga un margen adicional de 25px, por lo que excederá el tamaño de su contenedor padre por esta razón se superpone. te recomiendo este articulo de modelo de caja CSS: Modelo de Caja y este articlo de google sobre como utilizar las herramientas para desarrollador de tu navegador y depurar tu CSS Developer tools

1
  • muchas gracias lo pude resolver , no tenia esa perspectiva sobre el funcionamiento de las medidas de los contenedores
    – ANDREW
    Commented el 14 sept. 2022 a las 8:14

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.