Padding top creates extra gap between element of absolute child

June 17, 2023

<!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>

In the above code, the second section creates extra gap between first two sections because of the child element <div class="floater">Floater</div>,I don’t know why it’s vreating a gap and also don’t know how to get rid of the gap.

>Solution :

That is because you need to add the top property to your .floater element. I added top:0; to it and seems fine. Hope that helps.

*{
  box-size
}

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