第二行图片前有一个空白。我不知道为什么会这样。 边距和填充都很好。
所有图片大小相同，但图片前第二行有空白。 2张图片可以放在那里。
检查后，它只是显示了正文中的空白区域。 任何图像都没有多余的边距或填充。
使用 - “ float :左；”
第三行及以后的图像都可以。 有人能弄清楚这个问题，为什么会这样？
HTML 文件:
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>
<body>
<p>Photo Gallery</p>
<img src="a (1).jpg">
<img src="a (2).jpg">
<img src="a (3).jpg">
<img src="a (4).jpg">
<img src="a (5).jpg">
<img src="a (6).jpg">
<img src="a (7).jpg">
<img src="a (8).jpg">
<img src="a (9).jpg">
</body>
</html>
CSS 文件:
img{
width: 30%;
float: left;
margin: 1.66%;
padding: 0;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}
最佳答案
这是因为图像的高度不同。显示 block 布局的最佳解决方案是使用图像宽度并设置 display: inline-block
img{
width: 30%;
/* margin: 1.66%; */
padding: 0;
display: inline-block;
vertical-align: middle;
}
p{
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width:30%;
padding-bottom: 30px;
}<p>Photo Gallery</p>
<div class="image-container">
<img src="https://www.w3schools.com/html/img_girl.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</div否则你可以选择 flex 显示。这将确保子元素具有相同的高度，而无需明确提及高度。
.image-item {
display: flex;
flex-direction: column;
width: 30%;
margin: 1.66%;
padding: 0;
justify-content: center;
}
img{
width: 100%;
}
.image-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
p {
font-family: Raleway;
margin-left: 1.66%;
font-size: 30px;
font-weight: 800;
border-bottom: 3px solid #f1f1f1;
width: 30%;
padding-bottom: 30px;
}<p>Photo Gallery</p>
<div class="image-container">
<div class="image-item">
<img src="https://www.w3schools.com/html/img_girl.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
<div class="image-item">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
</div>
</div>关于html - 图像前的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59551182/