How can i give margin top space in html-CodePudding

I want to give top margin space in my page. It is coming as margin : 0 isntead i have have give 20px. I also tried to use
but this again failed

INDEX

<!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/[email protected]/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  data-active>
          <div  style="width: 18rem">
            <img
              
              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=&auto=format&fit=crop&w=600"
              alt="Card image cap"
            />
            <div >
              <h5 >Card title</h5>
              <p >
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" >Go somewhere</a>
            </div>
          </div>
        </li>
        <li >
          <div  style="width: 18rem">
            <img
              
              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 >
              <h5 >Card title</h5>
              <p >
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" >Go somewhere</a>
            </div>
          </div>
        </li>
        <li >
          <div  style="width: 18rem">
            <img
              
              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 >
              <h5 >Card title</h5>
              <p >
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" >Go somewhere</a>
            </div>
          </div>
        </li>
        <li >
          <div  style="width: 18rem">
            <img
              
              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 >
              <h5 >Card title</h5>
              <p >
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" >Go somewhere</a>
            </div>
          </div>
        </li>
        <li >
          <div  style="width: 18rem">
            <img
              
              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 >
              <h5 >Card title</h5>
              <p >
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" >Go somewhere</a>
            </div>
          </div>
        </li>
      </ul>
    </center>
  </body>
</html>

CSS

*,
*::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;
}

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

Ignore the result because i have given them opactiy to 0 to the rest of imag tag and only one to 1. just i want the some top space.

Need top space

CodePudding user response：

you need to Add top:20px to slide class

.slide{
top:20px;
}

CodePudding user response：

Remove line breaking at the beginning of the body.

ul { margin-top: 20px; }

CodePudding user response：

Remove position: absolute in .slide

like this

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

add position: relative in ul

ul {
  position: relative;
}