0

Se supone que si no definimos el tamaño del width este toma como referencia el tamaño de la caja padre.

En este ejemplo hay una imagen dentro de un div y este a su vez se encuentra dentro de un nav el cual tiene un ancho y un alto definido.

En teoría el tamaño del width del div debe ser igual al del nav, ya que es la etiqueta padre. Mi duda es, ¿por qué el alto (height) del div aumenta si en la etiqueta padre ya lo he establecido?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    nav {
      width: 540px;
      height: 540px;
    }
  </style>
</head>

<body>
  <nav>
    <div class="pana"><img src="https://static.wikia.nocookie.net/yugiohenespanol/images/5/54/Foto_kaibaman.jpg/revision/latest?cb=20120414171837&path-prefix=es"></div>
  </nav>
</body>
</html>

1
  • 2
    Si tienes algún ejemplo de código en el que apoyarte súbelo por favor. Según mis conocimientos, el navegador es el que define una serie de estilos predeterminados. Así que de acuerdo al elemento que elijas tendrá unas dimensiones predeterminadas. Algunos se adaptan al padre, otros al hijo o son indeferentes.
    – Mateo
    Commented el 11 jul. 2021 a las 21:07

1 respuesta 1

1

Por defecto, si no se establece un valor explícito para la propiedad "height", el navegador colocará el valor "auto", indicando que debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página, es decir, si no colocas un valor para la altura de la caja, esta dependerá de su contenido. Ahora bien, cuando agregas un valor al a altura puedes tener diferentes comportamientos como se explica aquí.

Una de las formas más comunes es con porcentajes, tomando en ese caso como referencia la altura de su elemento contenedor pero si ese elemento contenedor no tiene establecida una altura de forma explícita, se ignora la altura en porcentaje y se sustituye por el valor auto.

#padre0{
  height: 150px;
  background-color: red;
  padding: 10px;
}

#hijo0{
  height: 50%;
  background-color: blue;
}
<div id="padre0">
  <div id="hijo0"></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.