标题周围不需要的边距

时间：2016-04-17 13:10:27

标签： jquery html css html5 css3

出于某种原因，我不断在我的标题周围找到一个边缘，我不想在那里，我已经尝试了很多东西来摆脱它，但没有任何工作。

Example:

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。

请帮忙！非常感谢。

4 个答案:

答案 0 :(得分：3)

将以下CSS添加到CSS中。

body {
    margin: 0px;
}

答案 1 :(得分：1)

body{
    margin:0;
    }

应该解决你的问题。在这里 - fiddle

答案 2 :(得分：0)

使用此css代码，此代码删除所有浏览器默认边距和填充值

*{
margin: 0;
padding : 0
}

答案 3 :(得分：0)

使用

*{
 margin:0;
 padding:0;
 }

然而，使用reset.css或normalize.css会更好。这将删除所有其他CSS默认属性，并且您不会遇到任何此类问题。

使用这些cdn链接添加任何文件

Normalize.css

Reset.css

相关问题
最新问题