Espacio en blanco en cabecera – provocado por margin-top del ul

publicado por: Anonymous

Edito: acabo de ver que es el ul, pero, ¿no debería dejar el margen relativo al padre?

Estoy realizando algo tan sencillo como una cabecera, pero por alguna razón al introducir un margen en el ul produce el margen por fuera del contenedor del padre.

Código HTML:

<body>
  <div class="wrapper">
    <div class="header">
      <ul class="menu">
        <li>
          <a href="#">Inicio</a>
        </li>
      </ul>
    </div>
  </div>
</body>

Código CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

.wrapper {
  max-width: 1440px;
  margin: auto;
}

.wrapper .header {
  height: 800px;
  width: 100%;
  background-image: url("../imgs/header/header.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.wrapper .header::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .2;
  z-index: 1;
}

.wrapper .header .menu {
  margin: 100px 0 0 10px;
  text-transform: uppercase;
}

.wrapper .header .menu li {
  padding-left: 100px;
}

.wrapper .header .menu li a {
  color: #fff;
  font-size: "open-sans";
}

Link al JSFiddle que reproduce el mismo error: https://jsfiddle.net/5gf3g58v/

solución

Ese “fenómeno” se llama márgenes colapsadas, está definido en la especificación del Box model de CSS. Hay varias formas de resolver el problema, una de las más comunes es usando padding en vez de margin en el elemento hijo:

_x000D_

_x000D_

* {_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
  box-sizing: border-box;_x000D_
  list-style: none;_x000D_
}_x000D_
_x000D_
.wrapper {_x000D_
  max-width: 1440px;_x000D_
  margin: auto;_x000D_
}_x000D_
_x000D_
.wrapper .header {_x000D_
  height: 800px;_x000D_
  width: 100%;_x000D_
  background-image: url("../imgs/header/header.jpg");_x000D_
  background-position: center;_x000D_
  background-repeat: no-repeat;_x000D_
  background-size: cover;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.wrapper .header::before {_x000D_
  content: '';_x000D_
  display: block;_x000D_
  position: absolute;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  background-color: #000;_x000D_
  opacity: .2;_x000D_
  z-index: 1;_x000D_
}_x000D_
_x000D_
.wrapper .header .menu {_x000D_
  padding: 100px 0 0 10px;_x000D_
  text-transform: uppercase;_x000D_
}_x000D_
_x000D_
.wrapper .header .menu li {_x000D_
  padding-left: 100px;_x000D_
}_x000D_
_x000D_
.wrapper .header .menu li a {_x000D_
  color: #fff;_x000D_
  font-size: "open-sans";_x000D_
}

_x000D_

<body>_x000D_
  <div class="wrapper">_x000D_
    <div class="header">_x000D_
      <ul class="menu">_x000D_
        <li>_x000D_
          <a href="#">Inicio</a>_x000D_
        </li>_x000D_
      </ul>_x000D_
    </div>_x000D_
  </div>_x000D_
</body>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *