代码之家 › 专栏 › 技术社区 › Shubham Singhvi

衬垫顶部在绝对子元素之间产生额外间隙

padding css html

Shubham Singhvi · 技术社区 · 2 年前

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
    <style>
        .section{
            position:relative;
            min-height: 20vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 25px 15px 15px;
            background: red;
        }
        .section:nth-child(even){
            background: transparent;
        }
        .floater{
            position: absolute;
            background: #31ff0057;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="section">First Section. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias debitis, natus cum in ipsum, officia tempore repudiandae repellat accusantium rerum iusto voluptatem nostrum hic nihil alias soluta, iure quo magnam. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</div>
<div class="section">
    <div>Second Section</div>
    <div class="floater">Floater</div>
</div>
<div class="section">Third Section</div>
</body>
</html>

在上面的代码中,由于子元素的原因,第二个部分在前两个部分之间创建了额外的间隙 <div class="floater">Floater</div> ,我不知道为什么会有差距,也不知道如何消除差距。

2 回复 | 直到 2 年前

Coolis 2 年前

这是因为您需要添加 top 您的 .floater 要素我补充道 top:0; 看起来不错。希望能有所帮助。

.section{
  position:relative;
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 15px 15px;
  background: red;
}
.section:nth-child(even){
  background: transparent;
}
.floater{
  position: absolute;
  background: #31ff0057;
  height: 100%;
  width: 100%;
  z-index: -1;
  top: 0;
}

<div class="section">First Section. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias debitis, natus cum in ipsum, officia tempore repudiandae repellat accusantium rerum iusto voluptatem nostrum hic nihil alias soluta, iure quo magnam. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</div>
<div class="section">
    <div>Second Section</div>
    <div class="floater">Floater</div>
</div>
<div class="section">Third Section</div>

Khaled Alam 2 年前

移除的衬垫 .section 或将其更改为例如。 padding: 25px 15px;

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
    <style>
        .section{
            position:relative;
            min-height: 20vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 25px 15px 25px;
            background: red;
        }
        .section:nth-child(even){
            background: transparent;
        }
        .floater{
            position: absolute;
            background: #31ff0057;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
    </style>
</head>
<body>
<div class="section">First Section. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias debitis, natus cum in ipsum, officia tempore repudiandae repellat accusantium rerum iusto voluptatem nostrum hic nihil alias soluta, iure quo magnam. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</div>
<div class="section">
    <div>Second Section</div>
    <div class="floater">Floater</div>
</div>
<div class="section">Third Section</div>
</body>
</html>