Неправильно работает margin-top

Question

Между header и верхним краем браузера есть пробел который я не ожидал увидеть, а также не работает даже позиционирование top у элемента .company

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.general {
  height: 6200px;
}

.company {
  text-transform: uppercase;
  font-size: 24px;
  margin-top: 560px;
  margin-left: 12%;
  color: white;
}

header {
  width: 100%;
  background-color: black;
  height: 12.7%;
}

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

<head>
  <meta charset="UTF-8">
  <title>page1</title>
  <link rel="stylesheet" type="text/css" href="style2.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>
  <div class="general">
    <header>
      <div class="company">mycompany</div>
    </header>
  </div>
</body>

</html>

Answer 1

Есть некоторые параметры отображения у браузера по-умолчанию, чтобы их убрать см:
https://htmlacademy.ru/blog/boost/frontend/about-normalize-css
https://necolas.github.io/normalize.css/

Answer 2

Между header и верхним краем браузера есть пробел который я не ожидал увидеть

Это ожидаемо, так как этот пробел создается установленным для элемента company свойством margin-top: 560px;

а также не работает даже позиционирование top у элемента .company

Чтобы работало свойство top для элемента .company, необходимо этому элементу установить значение свойства position. Вероятнее всего, вы планируете определить расстояние от верхнего края родительского элемента general до верхнего края дочернего элемента .company. Предположим, что это так. Значит для элемента general нужно задать position: relative.

Теперь внесем все эти изменения в Ваш код:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.general {
  height: 6200px;
}

.company {
  text-transform: uppercase;
  font-size: 24px;
  /*margin-top: 560px; Удаляем*/
  margin-left: 12%;
  color: white;
  position: relative; /*Добавляем*/
  top: 12%; /*Добавляем*/
}

header {
  width: 100%;
  background-color: black;
  height: 12.7%;
}

<div class="general">
  <header>
    <div class="company">mycompany</div>
  </header>
</div>

Какой можно сделать из этого вывод?

Неправильно работает margin-top

В приведенном Вами вопросе код работает совершенно верно, согласно заданому Вами стилю. Вопрос в том, что Вы получили то, что получили, а не то, что планировали получить в результате. Ответ: margin-top работает правильно.

Чтобы таблицы стилей корректно работали, необходимо знать CSS синтаксис, набор правил при описании стиля, который описывает форматирование (изменение внешнего вида) отдельно взятых элементов на веб-странице.

БЛОГ НА HUSL

Неправильно работает margin-top

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

Неправильно работает margin-top