Из-за чего-то появляется отступ сверху

Question

Из-за чего-то появляется отступ сверху при этом я поставил даже normalize.css и все ровно он есть, кто знает почему? И да отступ в верстке должен быть, просто он там закрашен. код:

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 150px 0 150px;
  margin-top: 30px;
}

.header {
  background-color: #f6f2f2;
}

.head {
  background-color: #f6f2f2;
  margin: 0 150px 0 150px;
  margin-top: 30px;
}

.menu {
  min-height: 90px;
  background-color: #313030;
  display: flex;
  justify-content: center;
  line-height: 90px;
}

.item {
  list-style: none;
}

.link {
  text-decoration: none;
  color: white;
  padding: 0 24px 0 24px;
  display: block;
}

.link:hover {
  transition: 0.1s;
  background: red;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="normal.css">
  <title>Document</title>
</head>

<body>
  <!-- <div class="wrapper"> -->
  <header class="header">
    <div class="head">
      <ul class="menu">
        <li class="item"><a class="link" href="#">Home</a></li>
        <li class="item"><a class="link" href="#">Home</a></li>
        <li class="item"><a class="link" href="#">Home</a></li>
        <li class="item"><a class="link" href="#">Home</a></li>
      </ul>


      <div class="head-content">
        sfdlk;fdmskflkdsklfds
      </div>
    </div>
  </header>
  <main class="content">

  </main>
  <!-- </div>    -->
</body>

</html>

Answer 1

.head {
    background-color: #f6f2f2;
    margin: 0 150px 0 150px;
    margin-top: 30px;
}

В теге head указан отступ сверху в 30 px, убери эту строку и будет тебе счастье.

Еще добавь в стили (без точки именно, либо с точкой, но укажи на теге ul какой-то класс):

ul {
    margin: 0;
}

Answer 2

У Вас не подключены никакие обнуляющие стили? В разных браузерах есть стили по умолчанию. Обнулите их перед работой. Есть готовые файлы normalize.css и reset.css. но я пользуюсь своим:

* {
  padding: 0;
  margin: 0;
  border: 0;
}


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


:focus,
:active {
  outline: none;
}
a:focus,
a:active {
  outline: none;
}


nav,
footer,
header,
aside {
  display: block;
}


html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}


input,
button,
textarea {
  font-family: inherit;
}


input::-ms-clear {
  display: none;
}
button {
  cursor: pointer;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
a,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

Ну и margin-top: 30 px уберите у .head

Answer 3

Я бы сделал:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 150px 0 150px;
  margin-top: 30px;
}

.header {
  background-color: #f6f2f2;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.menu {
  min-height: 90px;
  background-color: #313030;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  list-style: none;
}

.link {
  text-decoration: none;
  color: white;
  padding: 10px 24px;
  background-color: transparent;
  transition: background-color 0.1s linear;
}

.link:hover {
  background-color: red;
}

.content {
  min-height: 200vh;
}

<!-- <div class="wrapper"> -->
<header class="header">
  <div class="container">
    <ul class="menu">
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
    </ul>


    <div class="head-content">
      sfdlk;fdmskflkdsklfds
    </div>
  </div>
</header>
<main class="content">
  Контент
</main>

Отступ появлялся, потому что вы давали лишний margin (внешний отступ), который отодвигал себя (т.е.) .head, сделаю в своём коде отступ от header, чтобы это было видно:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 150px 0 150px;
  margin-top: 30px;
}

.header {
  margin-top: 50px;
  background-color: #f6f2f2;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

.container {
  display: block;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.menu {
  min-height: 90px;
  background-color: #313030;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  list-style: none;
}

.link {
  text-decoration: none;
  color: white;
  padding: 10px 24px;
  background-color: transparent;
  transition: background-color 0.1s linear;
}

.link:hover {
  background-color: red;
}

.content {
  min-height: 200vh;
}

<!-- <div class="wrapper"> -->
<header class="header">
  <div class="container">
    <ul class="menu">
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
      <li class="item"><a class="link" href="#">Home</a></li>
    </ul>


    <div class="head-content">
      sfdlk;fdmskflkdsklfds
    </div>
  </div>
</header>
<main class="content">
  Контент
</main>

P.S.: Я для header добавил липкое состояние, что он липнет к верхнему краю, если вам это не нужно, то из этого

.header {
  background-color: #f6f2f2;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
}

сделайте

.header {
  background-color: #f6f2f2;
}

БЛОГ НА HUSL

Из-за чего-то появляется отступ сверху

Ответы (3 шт):