Почему CONTENT блок уходит вниз

108

17 декабря 2020, 17:40

Блок с контентом уходит вниз, 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>

Answer 1

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

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