我想在我的頁面中提供頂部邊距空間。它以保證金的形式出現：0 而不是我已經給了 20px。我也嘗試使用
，但這又失敗了
指數
<!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 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=&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>
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
忽略結果，因為我已將它們的 opactiy 設定為 0 到 imag 標記的其余部分，并且只有 1 到 1。只是我想要一些頂部空間。
需要頂部空間
uj5u.com熱心網友回復：
您需要將 top:20px 添加到幻燈片類
.slide{
top:20px;
}
uj5u.com熱心網友回復：
洗掉正文開頭的換行符。
ul { 邊距頂部：20px; }
uj5u.com熱心網友回復：
洗掉position: absolute_.slide
像這樣
.slide {
inset: 0;
opacity: 0;
}
或者
添加position: relativeul
ul {
position: relative;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481415.html
標籤：javascript html css
上一篇：呼叫函式角度時更改引數的值