Unwanted width or padding gap in HTML element

Question

So I'm trying to clone the Fiverr Start Selling page.

When inspecting the aside element of the hero section, there is a small gap that goes out of the bottom border. I don't know how is that possible, since I already set the CSS for the aside as position: absolute and bottom: 0.

Link to the GitHub page: https://cybersoft-lethanhliem.github.io/Fiverr_StartSelling/

Check the image below:

/* GLOBAL */

a:hover {
    text-decoration: none;
}

/* HEADER */

header {
    padding: 0.7rem 0;
}

header .search-bar {
    position: relative;
}

header .search-bar .fa-search {
    position: absolute;
    left: 8px;
}

header .search-bar input {
    padding: 7px 7px 7px 28px;
}

header #join {
    color: #1dbf73;
    border: 1px solid currentColor;
    border-radius: 4px;
}

header #join:hover {
    color: white;
    background: #19a463;
    border-color: transparent;
}

/* HERO */

.hero {
    position: relative;
    overflow: hidden;
}

.hero video {
    width: 100%;
    height: 580px;
    object-fit: cover;
}

.hero__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 0 -1px 2px rgb(0 0 0 / 30%);
}

.hero__caption h2 {
    font-size: 50px;
    line-height: 110%;
    max-width: 750px;
    margin: 0 auto;
}

.hero__caption h4 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    max-width: 750px;
    margin: 5px auto 15px;
}

.hero__caption a {
    background-color: #1dbf73;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
    border: 1px solid transparent;
    padding: 15px 35px;
    margin: 0;
    display: inline-block;
    border-radius: 3px;
    box-sizing: border-box;
}

.hero__caption a:hover {
    color: #1dbf73;
    background-color: #3fca89;
}

.hero__stats {
    background-color: rgba(255,255,255,.3);
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 25px 0;
}

.hero__stats li {
    list-style-type: none;
    width: calc(100% / 3);
    font-size: 22px;
    line-height: 30px;
}

.hero__stats li strong {
    font-size: 40px;
    font-weight: 400;
    text-transform: uppercase;
}

<!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">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">

    <!-- Bootstrap 4.6 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

    <!-- Start Selling CSS -->
    <link rel="stylesheet" href="./css/start_selling.css">
    <title>Start Selling on Fiverr</title>
</head>

<body>

    <header class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a href="" class="site-logo mr-5">
                <svg width="89" height="27" viewBox="0 0 89 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g fill="#404145">
                        <path
                            d="m81.6 13.1h-3.1c-2 0-3.1 1.5-3.1 4.1v9.3h-6v-13.4h-2.5c-2 0-3.1 1.5-3.1 4.1v9.3h-6v-18.4h6v2.8c1-2.2 2.3-2.8 4.3-2.8h7.3v2.8c1-2.2 2.3-2.8 4.3-2.8h2zm-25.2 5.6h-12.4c.3 2.1 1.6 3.2 3.7 3.2 1.6 0 2.7-.7 3.1-1.8l5.3 1.5c-1.3 3.2-4.5 5.1-8.4 5.1-6.5 0-9.5-5.1-9.5-9.5 0-4.3 2.6-9.4 9.1-9.4 6.9 0 9.2 5.2 9.2 9.1 0 .9 0 1.4-.1 1.8zm-5.7-3.5c-.1-1.6-1.3-3-3.3-3-1.9 0-3 .8-3.4 3zm-22.9 11.3h5.2l6.6-18.3h-6l-3.2 10.7-3.2-10.8h-6zm-24.4 0h5.9v-13.4h5.7v13.4h5.9v-18.4h-11.6v-1.1c0-1.2.9-2 2.2-2h3.5v-5h-4.4c-4.3 0-7.2 2.7-7.2 6.6v1.5h-3.4v5h3.4z">
                        </path>
                    </g>
                    <g fill="#1dbf73">
                        <path d="m85.3 27c2 0 3.7-1.7 3.7-3.7s-1.7-3.7-3.7-3.7-3.7 1.7-3.7 3.7 1.7 3.7 3.7 3.7z"></path>
                    </g>
                </svg>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarFiverr"
                aria-controls="navbarFiverr" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <form class="form-inline my-2 my-lg-0 search-bar">
                <i class="fa fa-search"></i>
                <input class="form-control" type="search" placeholder="Find Services" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>

            <div class="collapse navbar-collapse" id="navbarFiverr">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Fiverr Pro <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Explore</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">English</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">USD</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Become a Seller</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Sign In</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="join" href="#">Join
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <section class="hero">
        <video src="./img/cover_video.mp4"
            poster="./img/hero-cover.jpg"
            autoplay="" loop="" muted="" preload="auto">
        </video>

        <div class="hero__caption text-center text-white">
            <h2>Work Your Way</h2>
            <h4>You bring the skill. We'll make earning easy.</h4>
            <a href="#">Become a Seller</a>
        </div>

        <aside class="hero__stats w-100">
            <ul class="d-flex mb-0 pl-0 text-center text-white container px-0">
                <li>
                    A Gig is Bought Every
                    <br>
                    <strong>4 sec</strong>
                </li>
                <li>
                    Transactions
                    <br>
                    <strong>50M+</strong>
                </li>
                <li>
                    Price Range
                    <br>
                    <strong>$5 - $10,000</strong>
                </li>
            </ul>
        </aside>

    </section>

    <section class="community"></section>

    <section class="how-it-works"></section>

    <section class="education"></section>

    <section class="buyer"></section>

    <section class="qa"></section>

    <section class="contact"></section>

    <footer></footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./js/start_selling.js"></script>
</body>

</html>

Abhishek Pandey · Accepted Answer · 2021-02-23T10:36:17.737

Set vertical-align: middle; to video tag and the issue will be fixed.

.hero video {
    width: 100%;
    height: 580px;
    object-fit: cover;
    vertical-align: middle;
}

Another solution, you can set display:block to video tag.

.hero video {
    width: 100%;
    height: 580px;
    object-fit: cover;
    display: block;
}

By default video tags are block element, but not sure why, in you case it's behaving like a inline and inline-block element, and inline items takes some space from bottom.

you can read this post as well, Image inside div has extra space below the image

score 0 · Answer 2 · answered Feb 23 '21 at 10:11

0

The CSS bottom property doesn't mean "gap at the bottom", it means "how far from the bottom of the containing block to place an element with position: absolute or position: relative". The gap is caused by the padding property, which in this case is set to 25px 0 – that is, 25 pixels of "gap" at the top and bottom, and 0 pixels of "gap" at the left and right.

answered Feb 23 '21 at 10:11

Andreu Botella

154
1
6

Thanks but I don't think that small gap is caused by padding. I tried remove the padding, the gap is still there. – LiemLT Feb 23 '21 at 10:18
I might've misunderstood what you were trying to say. The gap below the hero, right? Try setting `html, body {margin: 0; padding: 0}` – Andreu Botella Feb 23 '21 at 10:21
@AndreuBotella, if the element is set to the 0 on the bottom, padding won't push it to the bottom – Abhishek Pandey Feb 23 '21 at 10:23

Unwanted width or padding gap in HTML element

2 Answers2