我怎样才能在 html 中给出 margin top space

Question

我想在我的页面中提供上边距 space。它以 margin : 0 的形式出现，而不是我给了 20px。我也尝试使用 <br/> 但这又失败了

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin-top: 100px;
}

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.slide > img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.slide[data-active] {
  opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <br />
    <br />
    <br />
    <br />
    <br />

    <center>
      <ul>
        <li class="slide" data-active>
          <div class="card" style="width: 18rem">
            <img
              class="card-img-top"
              src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </li>
        <li class="slide">
          <div class="card" style="width: 18rem">
            <img
              class="card-img-top"
              src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </li>
        <li class="slide">
          <div class="card" style="width: 18rem">
            <img
              class="card-img-top"
              src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </li>
        <li class="slide">
          <div class="card" style="width: 18rem">
            <img
              class="card-img-top"
              src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </li>
        <li class="slide">
          <div class="card" style="width: 18rem">
            <img
              class="card-img-top"
              src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>
        </li>
      </ul>
    </center>
  </body>
</html>

https://codepen.io/mohit-04/pen/abWPwPq

忽略结果，因为我已经将它们的不透明度设置为 0 到 img 标签的其余部分，并且只有 1 比 1。我只想要一些顶部 space.

Need top space

Answer 1

删除正文开头的换行符。

ul { margin-top: 20px; }

Answer 2

删除 .slide

中的 position: absolute

像这样

  .slide {
      inset: 0;
      opacity: 0;
    }

或

在 ul

中添加 position: relative

ul {
  position: relative;
}

Answer 3

您需要添加 top:20px 才能滑动 class

.slide{
top:20px;
}

我怎样才能在 html 中给出 margin top space

How can i give margin top space in html

html

javascript

css