HTML 元素中不需要的宽度或填充间隙
Posted
技术标签:
【中文标题】HTML 元素中不需要的宽度或填充间隙【英文标题】：Unwanted width or padding gap in HTML element 【发布时间】：2021-05-25 14:23:25 【问题描述】：所以我正在尝试克隆 Fiverr 开始销售页面。
检查英雄部分的aside元素时，有一个小间隙超出了底部边框。我不知道这怎么可能，因为我已经将 aside 的 CSS 设置为 position: absolute 和 bottom: 0。
GitHub 页面链接：https://cybersoft-lethanhliem.github.io/Fiverr_StartSelling/
查看下图：
/* 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 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>【问题讨论】：
【参考方案1】：将vertical-align: middle;设置为视频标签，问题将得到解决。
.hero video
width: 100%;
height: 580px;
object-fit: cover;
vertical-align: middle;
另一种解决方案，您可以将display:block设置为视频标签。
.hero video
width: 100%;
height: 580px;
object-fit: cover;
display: block;
默认情况下视频标签是块元素，但不知道为什么，在你的情况下它的行为就像一个内联和内联块元素，并且内联项从底部占用一些空间。
你也可以阅读这篇文章，Image inside div has extra space below the image
【讨论】：
【参考方案2】：CSS bottom 属性并不意味着“底部的间隙”，它的意思是“距离containing block 的底部多远才能放置带有position: absolute 或position: relative 的元素”。间隙是由padding 属性引起的，在本例中设置为25px 0——即顶部和底部25 个像素的“间隙”，左右0 个像素的“间隙”。
【讨论】：
谢谢，但我不认为小间隙是由填充引起的。我尝试删除填充，间隙仍然存在。 我可能误解了你的意思。英雄下方的差距，对吧？尝试设置html, body margin: 0; padding: 0
@AndreuBotella，如果元素设置为底部的0，填充不会将其推到底部以上是关于HTML 元素中不需要的宽度或填充间隙的主要内容，如果未能解决你的问题，请参考以下文章