Question

当我在浏览器中运行此HTML文件时，我的第一个div的顶部有18px的空格。当我在浏览器本地运行它但在JSFiddle中正常工作时，我的HTML文件中会出现此错误。不知道为什么会这样。

CSS代码：

/* CSS Document */
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#slide-1 .bcg {
    background-image:url('http://wanderingdanny.com/oxford/images/p/b4242667-wytham-woods-avenue.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 750px;
    width: 100%;
    position:relative;
}
#slide-1 .hsContainer {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    -webkit-transform: translateZ(0)
}
#slide-1 .hsContent {
    max-width: 450px;
    margin: -150px auto 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #ebebeb;
    padding: 0 8%;
    text-align: center;
}
#title {
    font-family:'Futura', sans-serif;
    font-size:3em;
}
#slide-1 ul {
    display: inline;
    width: 400px;
    margin: 0 auto;
}
ul {
    list-style: none;
}
.entry:hover {
    text-decoration: underline;
}
#menu a {
    color: #b2b2b2;
    text-decoration:none;
}
#slide-1 li {
    display: inline;
    width: 400px;
    color: #b2b2b2;
    font-family:'Arial', sans-serif;
}
#App {
    background-image:url('img/taxi.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 800px;
    width: 100%;
}
#App p {
    width: 30%;
    height: 800px;
    background-color:#FFF;
    opacity: .8;
    padding-top: 80px;
    padding-left: 20px;
    padding-right: 20px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#resume {
    display:block;
    font-family:'Cabin', sans-serif;
    padding-top: 70px;
    padding-bottom: 30px;
    font-size: medium;
    position:relative;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}
.container:before, .container:after {
    display: table;
    content:" ";
}
#resume h3 {
    font-family:'Lobster', cursive;
    font-size:63px;
}
.wohrd {
    padding-right: 60px;
    padding-left: 60px;
    border-radius: 6px;
    padding-top: 48px;
    width: 500px;
    padding-bottom: 48px;
    padding: 30px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    float:left;
    color: inherit;
    background-color: #eee;
    overflow:auto;
}
.hire {
    float:left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.hire p {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    padding-top: 100px;
}
.hire img {
    vertical-align: middle;
    border-top-width: 0px;
    width: 100%;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

编辑：完整的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <link href="par.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
      <link href="//fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
   </head>
   <body>
      <section id="slide-1" class="homeSlide">
         <div class="bcg" >
            <div class="hsContainer">
               <div id ="bill" class="hsContent" >
                  <h2 id="title">
                     ABHISHEK SAHA
                  </h2>
                  <div id="menu">
                     <ul>
                        <li class="entry">Resume</li>
                        <li>&bullet;</li>
                        <li class="entry"><a href="https://github.com/AbhishekSaha">Github</a></li>
                        <li>&bullet;</li>
                        <li class="entry">Android Application</li>
                     </ul>
                  </div>
               </div>
            </div>
         </div>
      </section>

Answer 1

我认为这是一个强大的编码问题。请使用Notepad ++打开HTML文件，然后在格式菜单中选择 utf-8中的编码，无需BOM 。

空格出现在HTML文件中，但不出现在JSFiddle中

1 个答案: