Question

感谢大家提供的精彩帮助。我发现确实错过了结束标签。但是，每当我添加

 tag, very strange. I also noticed that I was using a header tag for my paragraph instead of  tag.

Truly appreciate all of the feedback! ;)

(QUESTION)

I'm having trouble with the whitespace that is automatically added at the top of the webpage when I size my logo with h1. This also happens when I add text above the <pre> to Hello There. Any suggestions? Thanks in advance.

My HTML Markup

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Mimi Taylor | UX Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
      <header>
      <a href="index.html" id="logo">
        <h1>Mimi Taylor</h1>
    <nav>
      <ul>
          <li><a href="index.html" class="selected">About</a></li>
          <li><a href="casestudies.html">Case Studies</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
   </header>
    <div id="wrapper">
       <section>
           <img src="img/mimi.png"  width="200" height="200" alt="" class="profile-photo">

           <h3><pre>Hello There!</pre> My name is Mimi Taylor. I am passionate ux designer<span class="ux designer"></span> that believes in solving problems, creating unique and meaningful experiences across multiple channels. I play a key role in shaping the reputation of businesses and guiding their brands through creative consciousness and human-centered designs.</h3>
       </section>

        <footer>
          <a href="http://twitter.com/metria1"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
           <a href="http://facebook.com/lametriataylor"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy;2015 Made with Love by Mimi</p>
        </footer>
   </div>
</body>
</html>


CSS

/*****************************************
GENERAL
******************************************/
body {
      font-family: "Open Sans", sans-serif;
}


#wrapper {
          max-width: 940px;
          margin: 0 auto;
          padding: 0 5%;          
}

a {
   text-decoration: none;
}


img {
     max-width: 100%;
}

h3 {
margin: 0 0 1em 0;

}

/*****************************************
HEADING
******************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


#logo {
       text-align: center;
       margin: 0;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;

}


h2 {
    font-size: 3.0em;
    font-family: 'Open Sans';
    margin: -5px 0 0;
    font-weight: normal;
}   

/*****************************************
NAVIGATION
******************************************/

nav {
     text-align: center;
     padding: 10px 0;
     margin: 20px 0 0;
}

nav ul {
        list-style:none;
        margin: 0 10px;
        padding: 0;
}

nav li {
        display: inline-block;
}

nav a {
      font-weight: 800;
      padding: 15px 10px;
}

/*****************************************
FOOTER
******************************************/

footer {
       font-size: 0.75em;
       text-align: center;
       clear:both;
       padding-top: 50px;
       color: #ccc;

}


.social-icon {
          width: 20px;
          height: 20px;
          margin: 0 5px;
}

/*****************************************
PAGE: Case Studies
******************************************/

#gallery {
          margin: 0;
          padding: 0;
          list-style: none;
}

#gallery li {
             float: left;
             width: 45%;
             margin: 2.5%;
             background-color: #f5f5f5;
             color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: purple;
}


/*****************************************
PAGE: ABOUT
******************************************/

.profile-photo {
                clear: both;
                display: block;
                max-width: 150px;
                margin: 0 auto 30px;
                border-radius: 100%;

}

/*****************************************
PAGE: CONTACT
******************************************/

.contact-info {
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 0.9em;
}

.contact-info li.phone a {
  background-image:url('../img/phone.png');
}

.contact-info li.mail a {
  background-image:url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image:url('../img/twitter.png');
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

/*****************************************
COLORS
******************************************/

/*Site Body*/
body {
      background-color: #fff;
      color: #999;
}

/*Purple Header*/
header {
        background: #C0B9DD;
}

/* Nav Mobile Device Background*/
nav {
     background: #C0B9DD;
}

/*Logo text*/
h1, h2 {
        color: #fff;
}

/*Links*/
a {
   color: #6ab47b;
}

/*Nav Link*/
nav a, nav a:visited {
     color: #fff;    
}

/*Selected Nav Link*/
nav a.selected, nav a:hover {
                              color: #FEFFEA;
}

时，空白区域仍然会弹出

Answer 1

我将您的代码放入空白的代码中，似乎您需要将<body>的边距设置为0。

body {
    margin: 0;
}

要亲自查看此内容，您可以在浏览器中右键单击页面以打开检查器，大多数浏览器（使用Chrome / Firefox测试）都可以让您查看每个元素的边界和边距（如果选择它）在元素资源管理器中。然后我看到<body>有8px的余量。

Answer 2

向margin-top:0添加body可以解决您的问题。我已在codepen.io上使用您的HTML和CSS完成此操作。

Answer 3

用

替换你的身体css

body {
      font-family: "Open Sans", sans-serif;
      margin:auto;
}

这将迫使你的身体占据所有空间

这是一个片段

＆＃13;

/*****************************************
GENERAL
******************************************/
body {
      font-family: "Open Sans", sans-serif;
      margin:auto;
}


#wrapper {
          max-width: 940px;
          margin: 0 auto;
          padding: 0 5%;          
}

a {
   text-decoration: none;
}


img {
     max-width: 100%;
}

h3 {
margin: 0 0 1em 0;

}

/*****************************************
HEADING
******************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


#logo {
       text-align: center;
       margin: 0;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;

}


h2 {
    font-size: 3.0em;
    font-family: 'Open Sans';
    margin: -5px 0 0;
    font-weight: normal;
}   

/*****************************************
NAVIGATION
******************************************/

nav {
     text-align: center;
     padding: 10px 0;
     margin: 20px 0 0;
}

nav ul {
        list-style:none;
        margin: 0 10px;
        padding: 0;
}

nav li {
        display: inline-block;
}

nav a {
      font-weight: 800;
      padding: 15px 10px;
}

/*****************************************
FOOTER
******************************************/

footer {
       font-size: 0.75em;
       text-align: center;
       clear:both;
       padding-top: 50px;
       color: #ccc;

}


.social-icon {
          width: 20px;
          height: 20px;
          margin: 0 5px;
}

/*****************************************
PAGE: Case Studies
******************************************/

#gallery {
          margin: 0;
          padding: 0;
          list-style: none;
}

#gallery li {
             float: left;
             width: 45%;
             margin: 2.5%;
             background-color: #f5f5f5;
             color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: purple;
}


/*****************************************
PAGE: ABOUT
******************************************/

.profile-photo {
                clear: both;
                display: block;
                max-width: 150px;
                margin: 0 auto 30px;
                border-radius: 100%;

}

/*****************************************
PAGE: CONTACT
******************************************/

.contact-info {
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 0.9em;
}

.contact-info li.phone a {
  background-image:url('../img/phone.png');
}

.contact-info li.mail a {
  background-image:url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image:url('../img/twitter.png');
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

/*****************************************
COLORS
******************************************/

/*Site Body*/
body {
      background-color: #fff;
      color: #999;
}

/*Purple Header*/
header {
        background: #C0B9DD;
}

/* Nav Mobile Device Background*/
nav {
     background: #C0B9DD;
}

/*Logo text*/
h1, h2 {
        color: #fff;
}

/*Links*/
a {
   color: #6ab47b;
}

/*Nav Link*/
nav a, nav a:visited {
     color: #fff;    
}

/*Selected Nav Link*/
nav a.selected, nav a:hover {
                              color: #FEFFEA;
}

＆＃13;

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <body>
      <header>
      <a href="index.html" id="logo">
        <h1>Mimi Taylor</h1>
    <nav>
      <ul>
          <li><a href="index.html" class="selected">About</a></li>
          <li><a href="casestudies.html">Case Studies</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
   </header>
    <div id="wrapper">
       <section>
           <img src="img/mimi.png"  width="200" height="200" alt="" class="profile-photo">

           <h3><pre>Hello There!</pre> My name is Mimi Taylor. I am passionate ux designer<span class="ux designer"></span> that believes in solving problems, creating unique and meaningful experiences across multiple channels. I play a key role in shaping the reputation of businesses and guiding their brands through creative consciousness and human-centered designs.</h3>
       </section>

        <footer>
          <a href="http://twitter.com/metria1"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
           <a href="http://facebook.com/lametriataylor"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
          <p>&copy;2015 Made with Love by Mimi</p>
        </footer>
   </div>
</body>
</html>

＆＃13;

Answer 4

兄弟，

你忘了关闭你的标签

<a href="index.html" id="logo">
        <h1>Mimi Taylor</h1>

关闭它并尝试body{ margin:0px;padding:0px;}

浏览器添加此自动css ..

body {
    display: block;
    margin: 8px;
}

在网页顶部恼人的空白

(QUESTION)

4 个答案: