0

Блок с контентом уходит вниз, margin-top не работает почему-то, что делать?

* {
  margin: 0;
}

.text {
  color: white;
  margin: 10px 10px 10px 10px;
  font-size: 14px;
  line-height: 22px;
}

.head-main {
  width: 960px;
  height: 120px;
  border-bottom-style: solid;
  border-color: #696969;
  border-width: 1px;
  margin-right: auto;
  margin-left: auto;
}

.head-logo {
  margin-top: -120px;
  margin-bottom: -75px;
  margin-right: 20px;
  width: 120px;
  height: 100px;
}

.head-contact {
  margin-right: 20px;
  display: inline-block;
  background-color: #777777;
  width: 280px;
  height: 100px;
}

.head-more {
  text-align: right;
  display: inline-block;
  background-color: #777777;
  width: 510px;
  height: 100px;
}

.content {
  width: 960px;
  height: 1008px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
}

.content-center {
  display: inline-block;
  border-style: solid;
  border-color: #696969;
  border-width: 1px;
  width: 79%;
  height: 1008px;
}

.content-left {
  display: inline-block;
  border-style: solid;
  border-color: #696969;
  border-width: 1px;
  width: 20%;
  height: 1008px;
}

.content-left-menu {
  margin-right: 20px;
  display: inline-block;
  background-color: #777777;
  width: 192px;
  height: 400px;
}

.content-left-green {
  margin-top: 430px;
  margin-right: 20px;
  display: inline-block;
  background-color: #777777;
  width: 192px;
  height: 180px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="main.css">
  <title>TestSite</title>
  <div class="head-main">
    <img class="head-logo" alt="Logo" src="testimg.png">
    <div class="head-contact">
      <div class="text">2</div>
    </div>
    <div class="head-more">
      <div class="text">3</div>
    </div>
  </div>
</head>

<body>
  <div class="content">
    <div class="content-left">
      <div class="content-left-menu">
        <div class="text">4</div>
      </div>
      <div class="content-left-green">
        <div class="text">7</div>
      </div>
    </div>
    <div class="content-center">CONTENT</div>
  </div>
</body>

<footer>

</footer>

</html>

1
  • Что у Вас верстка делает в теге head?
    – meine
    14 мая 2019 в 16:09

1 ответ 1

2

Причина того, что блок .content уходит вниз в том, что у вас два инлайн-блока рядом, а по умолчанию они выравниваются по baseline. Надо добавить этому блоку vertical-align: top.

Ну и в остальном надо внести некоторые поправки в код: убрать разметку из head, footer должен быть внутри body, да и в целом про семантические теги не забыть, почитайте о разнообразии HTML5-элементов.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.