Question 188602 in Html Question posted in
Some basic documentation can be found here.

Html – Padding top creates extra gap between element of absolute child

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

Tags:

2

Answers


  1. 0

    Remove padding of .section or change it to e.g. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search