css 填充顶部在绝对子元素之间创建额外间隙

7gyucuyw 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(108)

<!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>，第二部分在前两部分之间创建了额外的间隙，我不知道为什么它会创建间隙，也不知道如何消除差距。

css

来源：https://stackoverflow.com/questions/76497738/padding-top-creates-extra-gap-between-element-of-absolute-child

2条答案

按热度按时间

x0fgdtte1#

这是因为您需要将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>

赞(0）回复(0）举报 2023-06-25

ehxuflar2#

删除.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>

赞(0）回复(0）举报 2023-06-25

我来回答

css 填充顶部在绝对子元素之间创建额外间隙

2条答案

相关问题

热门标签

最新问答