Как прижать нижний блок к верхнему

Рейтинг: 0Ответов: 3Опубликовано: 28.07.2025

разметка

Не могу решить данную задачку. Не получается прижать нижний блок к верхнему

/* Стили блоков */
.block-1 {
  width: 240px;
  height: 80px;
  margin: 50px 110px;
  padding: 20px;
  border: 10px dotted rgba(255, 255, 255, 0.5);
}

.block-2 {
  width: 300px;
  height: 60px;
  margin-top: 20px;
  margin-left: 80px;
  padding: 10px;
  border: 15px groove rgba(255, 255, 255, 0.7);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Свойства блочной модели, закрепление 5</title>
  <link rel="stylesheet" href="setting-extra-1.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="block block-1">Блок 1</div>
    <div class="block block-2">Блок 2</div>
  </div>
</body>

</html>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Как и сказали в комментариях, достаточно убрать margin у верхнего блока снизу и у нижнего блока сверху

/* Стили блоков */
.block-1 {
  width: 240px;
  height: 80px;
  margin: 50px 110px 0;
  padding: 20px;
  border: 10px dotted rgba(255, 255, 0, 0.5);
}

.block-2 {
  width: 300px;
  height: 60px;
  margin-top:0;
  margin-left: 80px;
  padding: 10px;
  border: 15px groove rgba(255, 255, 255, 0.7);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Свойства блочной модели, закрепление 5</title>
  <link rel="stylesheet" href="setting-extra-1.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="block block-1">Блок 1</div>
    <div class="block block-2">Блок 2</div>
  </div>
</body>

</html>

▲ 0

в стиле указаны отступы больше нуля, но если очень надо именно такие, то можно прижать блоки через смещение.

.block-1, .block-2 {
  margin: 0px !important;
}

/* или */

.block-2 {
  transform: translateY(-50px);
}

▲ -1
Block1 margin: 50px 110px 0;

Blok2  margin-top:0;