как сделать нижний отступ у блока со свойством absolute?

Question

как сделать нижний отступ у блока со свойством absolute? (в данном примере он имеет белый цвет, класс wrapper)

margin: 80px 0 80px 80px; не помогает

html {
    box-sizing: border-box;
}
body {
    background-color: gold;
    margin: 0;
}

.wrapper {
    position: absolute;
    background: white;
    margin: 80px 0 80px 80px;
    width: calc(100vw - 160px);
}

.box {
    margin: 88px 100px 88px 100px;
    background: #FFFFFF;
}

.box div {
    height: 800px;
    background-color: blueviolet;
}

<div class="wrapper">
    <div class="box">
        <div>

        </div>
    </div>
</div>

Answer 1

Как я понял, вам нужно, чтобы wrapper не касался края страницы. Данный метод решает проблему, но не совсем корректно. Просто расширьте body с помощью height: 1200px;

html {
    box-sizing: border-box;
}
body {
    background-color: gold;
    margin: 0;
    height: 1200px;
}

.wrapper {
    position: absolute;
    background: white;
    margin: 80px 0 80px 80px;
    width: calc(100vw - 160px);
}

.box {
    margin: 88px 100px 88px 100px;
    background: #FFFFFF;
}

.box div {
    height: 800px;
    background-color: blueviolet;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
    <div class="box">
        <div>

        </div>
    </div>
</div>
</body>
</html>

Answer 2

Обернуть его в ещё один блок и использовать padding.

body {
  background-color: gold;
  margin: 0;
}

.wrapper-outer {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 0;
  padding: 80px 0;
  pointer-events: none;
}

.wrapper {
  pointer-events: all;
  background: white;
  overflow: hidden;
}

.box {
  margin: 88px 100px 88px 100px;
  background: #FFFFFF;
}

.box div {
  height: 800px;
  background-color: blueviolet;
}

<div class="wrapper-outer">
  <div class="wrapper">
    <div class="box">
      <div></div>
    </div>
  </div>
</div>

Answer 3

Можно просто добавить к твоему коду:

.wrapper::after {
    content: "";
    position: absolute;
    bottom: -80px;
    height: 1px;
    width: 1px;
}

html {
    box-sizing: border-box;
}
body {
    background-color: gold;
    margin: 0;
}

.wrapper {
    position: absolute;
    background: white;
    margin: 80px 0 80px 80px;
    width: calc(100vw - 160px);
}

.wrapper::after {
    content: "";
    position: absolute;
    bottom: -80px;
    height: 1px;
    width: 1px;
}

.box {
    margin: 88px 100px 88px 100px;
    background: #FFFFFF;
}

.box div {
    height: 800px;
    background-color: blueviolet;
}

<div class="wrapper">
    <div class="box">
        <div>

        </div>
    </div>
</div>

Хотя лично я бы ещё несколько переписал стили:

body {
  background-color: gold;
  margin: 0;
}

.wrapper {
  position: absolute;
  background: white;
  top: 80px;
  left: 80px;
  right: 80px;
}

.wrapper::after {
  content: "";
  position: absolute;
  bottom: -80px;
  height: 1px;
  width: 1px;
}

.box {
  margin: 88px 100px 88px 100px;
  background: #FFFFFF;
}

.box div {
  height: 800px;
  background-color: blueviolet;
}

<div class="wrapper">
  <div class="box">
    <div></div>
  </div>
</div>

БЛОГ НА HUSL

как сделать нижний отступ у блока со свойством absolute?

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