出于某种原因，我一直在标题周围留出空白，但我不想留在那里，我尝试了很多方法来摆脱它，但没有任何效果。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/testing/main.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400italic,700italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="header-fixed">
<div class="header-limiter">
<h1><a href="http://itzjavacraft.tk">ItzJavaCraft<span></span></a></h1>
<nav>
<a href="#" class="selected">Home</a>
<a href="#">Blog</a>
<a href="#">Tutorials</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</nav>
</div>
</header>
<div class="header-fixed-placeholder">
</div>
<div class="wrap">
<article class="main">
</article>
</div>
<footer>
<hr>
<div id="footer-links">
<div>
<ul>
<li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
<li><a href="http://twitter.com/itzjavacraft" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a></li>
<li><a href="http://instagram.com/itzjavacraft" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
<li><a href="https://vine.co/u/1269681750234615808" target="_blank"><i class="fa fa-vine" aria-hidden="true"></i> Vine</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="https://youtube.com/channel/UCZhk1PN4RzBXe63bqg0GtHw" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</a></li>
<li><a href="http://twitch.tv/itzjavacraft" target="_blank"><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</a></li>
<li><a href="http://soundcloud.com/itzjavacraft" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</a></li>
<li><a href="https://www.reddit.com/user/ItzJavaCraft" target="_blank"><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="http://github.com/itzjavacraft" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> GitHub</a></li>
<li><a href="http://stackoverflow.com/users/6125445/itzjavacraft" target="_blank"><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</a></li>
<li><a href="https://jsfiddle.net/user/ItzJavaCraft" target="_blank"><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</a></li>
</ul>
</div>
</div>
<hr>
<p class="footer">Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
<a href="http://itzjavacraft.tk">
<img src="/assets/images/logo.png" alt="ItzJavaCraft" style="width:149px;height:16px;"/>
</a>
</footer>
<div class="menu">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var showHeaderAt = 150;
var win = $(window),
body = $('body');
if(win.width() > 600){
win.on('scroll', function(e){
if(win.scrollTop() > showHeaderAt) {
body.addClass('fixed');
}
else {
body.removeClass('fixed');
}
});
}
});
</script>
</div>
</div>
CSS:
/* Toolkit */
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
img.center-align {
display: block;
margin-left: auto;
margin-right: auto;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently not supported by any browser */
}
/* Links */
a:link {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:hover {
color: #9700bd;
background-color: transparent;
text-decoration: underline;
font-size: 75%;
}
a:active {
color: #9700bd;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
/* Header */
.header-fixed {
background-color:#292c2f;
box-shadow:0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
top:-100px;
-webkit-transition:top 0.3s;
transition:top 0.3s;
}
.header-fixed .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
.header-fixed-placeholder{
height: 80px;
display: none;
}
.header-fixed .header-limiter h1 {
float: left;
font: normal 28px Cookie, Arial, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-fixed .header-limiter h1 span {
color: #5383d3;
}
.header-fixed .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-fixed .header-limiter nav {
font:16px Arial, Helvetica, sans-serif;
line-height: 40px;
float: right;
}
.header-fixed .header-limiter nav a{
display: inline-block;
padding: 0 5px;
text-decoration:none;
color: #ffffff;
opacity: 0.9;
}
.header-fixed .header-limiter nav a:hover{
opacity: 1;
}
.header-fixed .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
body.fixed .header-fixed {
padding: 10px 40px;
height: 50px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
body.fixed .header-fixed-placeholder {
display: block;
}
body.fixed .header-fixed .header-limiter h1 {
font-size: 24px;
line-height: 30px;
}
body.fixed .header-fixed .header-limiter nav {
line-height: 28px;
font-size: 13px;
}
@media all and (max-width: 600px) {
.header-fixed {
padding: 20px 0;
height: 75px;
}
.header-fixed .header-limiter h1 {
float: none;
margin: -8px 0 10px;
text-align: center;
font-size: 24px;
line-height: 1;
}
.header-fixed .header-limiter nav {
line-height: 1;
float:none;
}
.header-fixed .header-limiter nav a {
font-size: 13px;
}
body.fixed .header-fixed {
display: none;
}
}
/* Footer */
footer {
text-align: center;
}
#footer-links {
display: flex;
}
#footer-links div {
margin: 0 auto;
display: inline-block;
}
#footer-links ul {
list-style: none;
}
p.footer {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 50%;
clear: both;
font-size: 75%;
font-family: 'Anonymous Pro';
}
/* Other */
body {
}
article.main {
height: 1500px;
}
div.wrap {
margin-left: 10%;
margin-right: 10%;
}
可以找到网站的实时版本 here .
求助!将不胜感激。
最佳答案
将以下 CSS 添加到您的 CSS。
body {
margin: 0px;
}
关于jquery - 标题周围不需要的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36676960/