我正在设计一个带有导航栏的网站，后跟两列。出于某种原因，导航栏在顶部、左侧和右侧显示有填充，即使我没有添加任何这些属性。
导航栏和两列应该具有相同的宽度，但目前情况并非如此:
@font-face {
font-family: 'Open Sans', sans-serif;
src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('woff');
}
html {
min-height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
}
.nav {
background-color: rgba(0, 0, 0, 0.75);
height: 50px;
width: 100%;
}
.nav a {
float: left;
color: #f2f2f2;
padding: 14px;
text-decoration: none;
font-size: 17px;
margin: 0;
}
.nav a:hover {
text-shadow: 0px 0px 20px #ffffff;
}
.nav a:active {
color: black;
}
.nav-right {
float: right;
}
.nav img {
float: left;
width: 40px;
height: 40px;
line-height: 4em;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.column {
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
width: 100%;
}
#hero-image {
max-width: 50vw;
} <!DOCTYPE html>
<html lang="en" class="home">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="nav">
<a href="/">Title</a>
<div class="nav-right">
<a href="/">Link</a>
<a href="/explore">Link</a>
</div>
</div>
<div class="row">
<div class="column">
1
</div>
<div class="column">
<img src="https://i.imgur.com/raVKyuB.jpg" id="hero-image" alt="Attraction">
</div>
</div>
<footer>
<p>Copyright © 2019</p>
</footer>
</body>
</html>最佳答案
首先，你有这个:
.nav-right {
float: right;
margin-right: 10px;
}
这会导致 .nav-right 元素右边有 10px 的空间。
其次，您应该将 margin: 0 添加到 html 和 body 以避免它们的默认边距。
关于html - 没有填充的 Div 空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59121101/