Blank space in header - caused by margin-top of ul

Question

Blank space in header - caused by margin-top of ul

Navigation

#1 by (3 votes)

2

Edit : I just saw that it's the ul, but should not I leave the margin relative to the father?

I'm doing something as simple as a header, but for some reason, entering a margin in the ul produces the margin outside the parent's container.

HTML Code:

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

CSS Code:

* {
  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 to the JSFiddle that reproduces the same error: link

html5 html css3 css

asked by Cheshire 18.11.2016 в 17:54

source

1 answer

Problem with chess exercise in java Bootstrap stops Accessing an Input after Setting Runat="Server" ASP.net C #

score 3 · Accepted Answer

This "phenomenon" is called collapsed margins, it is defined in the specification of the Box model of CSS. There are several ways to solve the problem, one of the most common is using padding instead of margin in the child element:

* {
  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 {
  padding: 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";
}

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