所以我不知道为什么这个栏在这里:
这里是 a JSFiddle .我需要去除黄色条。
下面是片段中的相同代码:
body {
padding: 0;
margin: 0;
background-color: #fff9e8;
}
.topnav {
background-color: #edeff2;
overflow: hidden;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
padding: 0;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: 'Fresca', sans-serif;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.maincontent {
width: 1000px;
margin: 0 auto;
background-color: #fff;
padding-top: 25px;
}
.infotexta {
text-align: center;
}
img {
background-color: #fff;
margin: 0;
padding: 0;
}
.middlebar {
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
background-color: #edeff2;
padding: 0;
margin: 0;
}
.main-image-front {
padding: 0;
margin: 0;
width: 100%;
height: 400px;
}<!DOCTYPE html>
<html>
<head>
<title>placeholder</title>
<!-- css -->
<link href="mainstyle.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a href="#">Home</a>
<a href="#">temp</a>
<a href="#">temp</a>
<a href="#">temp</a>
</div>
<div class="topimage">
<img src="/users/grecko/desktop/back.png" alt="topimage" class="main-image-front">
</div>
<div class="middlebar">
</div>
<div class="maincontent">
<div class="maincontent-about infotexta">
<h1>placeholder</h1>
<p>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here</p>
</div>
</div>
<body>编辑:JSFiddle 显示图像的替代文本，因为我忘记了我的电脑上有图像，但您仍然可以看到该行。
谢谢
最佳答案
在图像上设置一个高度，然后在容器上设置相同的高度。
https://jsfiddle.net/o4r87q9u/3/
.topimage img {
height: 200px;
}
.topimage {
height: 200px;
}
之前
之后
关于html - 为什么我的 div 之间有一个随机栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45091216/