html - 为什么我得到一个意想不到的图像底部空间
问题描述
我是初学者，我正在学习 HTML 和 CSS。我正在尝试制作网页，但遇到了问题。问题是我在图像底部获得了额外的空间。
图像中的红色标记表示空间
这是我的 HTML 和 CSS 代码：
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
.food-menu {
width: 100%;
margin: 2rem 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.food-menu .item-image {
width: 50%;
}
.food-menu .item-image img {
width: 100%;
display: block;
}
.food-menu .item-info {
width: 50%;
background-color: #F1F8F6;
padding: 0 7rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.food-menu .item-info .title {
font-size: 24px;
font-weight: 600;
letter-spacing: 0.16px;
color: #1E3932;
text-align: center;
}
.food-menu .item-info .sub-title {
font-size: 19px;
font-weight: 600;
letter-spacing: 0.16px;
margin: 2.4rem 0;
color: #1E3932;
text-align: center;
line-height: 33.25px;
}
.food-menu .item-info .button {
padding: 7px 16px;
border: 1px solid #000;
font-size: 16px;
border-radius: 30px;
color: #1E3932;
font-weight: 700;
}
.food-menu .item-info .button:hover {
background-color: #DBE5E2;
}
.order {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
}
.order .food-menu {
display: -ms-grid;
display: grid;
}
.order .food-menu .item-image, .order .food-menu .item-info {
width: 100%;
}
.order .food-menu .item-info{
background-color: #D4E9E2;
padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */<!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="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="order">
<div class="food-menu" id="item-four">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Order and pick up. Easy as that.</p>
<p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
<a class="button" href="#">See pickup options</a>
</div>
</div>
<div class="food-menu" id="item-five">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Floating into summer like…</p>
<p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
<a class="button" href="#">Order now</a>
</div>
</div>
</div>
</body>
</html>我在 HTML 第 27 行的 id item-5 中获得了额外的空间。
#item-five > .item-image.
为什么我得到这个空间？
如何删除空间，两个 div 类的高度item-info必须相等。
解决方案
添加align-content:start到您的网格容器中，您将面临默认的拉伸对齐
.order .food-menu {
display: grid;
align-content:start
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
.food-menu {
width: 100%;
margin: 2rem 0;
display: flex;
flex-direction: row-reverse;
}
.food-menu .item-image {
width: 50%;
}
.food-menu .item-image img {
width: 100%;
display: block;
}
.food-menu .item-info {
width: 50%;
background-color: #F1F8F6;
padding: 0 7rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.food-menu .item-info .title {
font-size: 24px;
font-weight: 600;
letter-spacing: 0.16px;
color: #1E3932;
text-align: center;
}
.food-menu .item-info .sub-title {
font-size: 19px;
font-weight: 600;
letter-spacing: 0.16px;
margin: 2.4rem 0;
color: #1E3932;
text-align: center;
line-height: 33.25px;
}
.food-menu .item-info .button {
padding: 7px 16px;
border: 1px solid #000;
font-size: 16px;
border-radius: 30px;
color: #1E3932;
font-weight: 700;
}
.food-menu .item-info .button:hover {
background-color: #DBE5E2;
}
.order {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
}
.order .food-menu {
display: grid;
align-content:start
}
.order .food-menu .item-image, .order .food-menu .item-info {
width: 100%;
}
.order .food-menu .item-info{
background-color: #D4E9E2;
padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */<!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="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="order">
<div class="food-menu" id="item-four">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Order and pick up. Easy as that.</p>
<p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
<a class="button" href="#">See pickup options</a>
</div>
</div>
<div class="food-menu" id="item-five">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Floating into summer like…</p>
<p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
<a class="button" href="#">Order now</a>
</div>
</div>
</div>
</body>
</html>如果要保持总高度相同，请定义模板行：
.order .food-menu {
display: grid;
grid-template-rows:auto 1fr;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
.food-menu {
width: 100%;
margin: 2rem 0;
display: flex;
flex-direction: row-reverse;
}
.food-menu .item-image {
width: 50%;
}
.food-menu .item-image img {
width: 100%;
display: block;
}
.food-menu .item-info {
width: 50%;
background-color: #F1F8F6;
padding: 0 7rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.food-menu .item-info .title {
font-size: 24px;
font-weight: 600;
letter-spacing: 0.16px;
color: #1E3932;
text-align: center;
}
.food-menu .item-info .sub-title {
font-size: 19px;
font-weight: 600;
letter-spacing: 0.16px;
margin: 2.4rem 0;
color: #1E3932;
text-align: center;
line-height: 33.25px;
}
.food-menu .item-info .button {
padding: 7px 16px;
border: 1px solid #000;
font-size: 16px;
border-radius: 30px;
color: #1E3932;
font-weight: 700;
}
.food-menu .item-info .button:hover {
background-color: #DBE5E2;
}
.order {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
}
.order .food-menu {
display: grid;
grid-template-rows:auto 1fr;
}
.order .food-menu .item-image, .order .food-menu .item-info {
width: 100%;
}
.order .food-menu .item-info{
background-color: #D4E9E2;
padding: 1rem 4rem;
}
/*# sourceMappingURL=styles.css.map */<!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="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="order">
<div class="food-menu" id="item-four">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-70203.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Order and pick up. Easy as that.</p>
<p class="sub-title">Just open the app, order your favorites, and enjoy contactless pay. From there, choose whichever pickup method is best for you.</p>
<a class="button" href="#">See pickup options</a>
</div>
</div>
<div class="food-menu" id="item-five">
<div class="item-image">
<img src="https://content-prod-live.cert.starbucks.com/binary/v2/asset/137-72045.jpg" alt="starbucks-free-coffee">
</div>
<div class="item-info">
<p class="title">Floating into summer like…</p>
<p class="sub-title">Keep the laid-back vibes going. Order Starbucks drinks on Uber Eats.**</p>
<a class="button" href="#">Order now</a>
</div>
</div>
</div>
</body>
</html>推荐阅读
- c# - 如何在不诉诸 Task.Delay 的情况下让我的 Discord 机器人保持登录状态？
- php - 在 WooCommerce 帐户激活邮件中访问用户的名字（DOI 通过 WooCommerce Germanized）
- java - 为参数化变量创建 shell 脚本
- python - OSError: [Errno 9] 错误的文件描述符
- ansible - 与主机的共享连接已关闭
- c - C语言中的Do-While无限循环
- sympy - sympy - UnevaluatedExpr 和可交换属性 - 保持浮点数不被评估
- html - SVG 在屏幕绘制时闪烁大
- python - 在 validate_operand 中出现错误“传递了一个 {obj}”.format(obj=type(obj))
- scala - Scala-Lang 推荐的导入语句样式：package._ 还是 package.ClassName？