保证金：0;没有将保证金设置为0

时间：2015-04-16 03:54:20

标签： html css

我是网页设计的新手，我正在尝试为网页创建标题。但是，我似乎在它上面有一些空的空间。我尝试将标准化样式表添加到我的文档中，并将html，body和header元素的边距和填充设置为0，但似乎没有任何效果。如何删除此空格？

HTML 

<html>
  <head>
    <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
  </head>
  <body>
    <header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>
  </body>
</html>

CSS 

html, body, header {
  margin: 0;
  padding: 0;
}

body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}

2 个答案:

答案 0 :(得分：4)

这是一个由两部分组成的问题，有两个替代解决方案。

解决方案1：

首先，<h1>元素中的<header>元素。 h1 元素的固有margin-top和margin-bottom为16px。

其次，float: left;导致标题向下移动。从float: left;移除header {}并将其添加到您的CSS中，让您的标题与页面顶部齐平：

header h1 {
    margin-top: 0px;
}

示例：

＆＃13;
＆＃13; 
header h1 {
    margin-top: 0px;
}

html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}
＆＃13; 
<header>
  <a href="#">
    <h1>Jason K</h1>
    <h2>Bum</h2>
  </a>
</header>
<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="#">
          <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
          <p>sample sample sample</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
          <p>sample sample sample</p>
        </a>
      </li>
    </ul>
  </section>
</div>
＆＃13;
＆＃13;
＆＃13;

解决方案2：

或者，您可以离开float: left;并从 ul 元素中删除margin-top，该元素的内部边距为16px，顶部和底部。加上这个：

header h1, #gallery {
    margin-top: 0;
}

您将获得与解决方案1相同的效果。

你应该避免使用通用选择器，因为这将导致意外后果，更不用说通用选择器非常慢的事实。互联网上有一小部分关于使用* {}进行任何操作的危险的文献，特别是作为CSS重置工具。

答案 1 :(得分：0)

第一个解决方案： 

* {
    margin: 0;
    padding: 0;
}

使用margin: 0;和padding: 0; *将解决您的问题。请查看更新后的代码：

＆＃13;
＆＃13; 
* {
    margin: 0;
    padding: 0;
}

body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}
＆＃13; 
<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>
＆＃13;
＆＃13;
＆＃13;

第二个解决方案： 

ul {
    margin: 0;
}

因为ul会占用保证金。查看Fiddle here

＆＃13;
＆＃13; 
ul {
    margin: 0;
}

html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}
＆＃13; 
<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>
＆＃13;
＆＃13;
＆＃13;

第三个解决方案：

清除通用选择器将解决您的问题。像：

*{
    clear:both;
}

检查Fiddle.

＆＃13;
＆＃13; 
*{
    clear:both;
}


html, body, header {
  margin: 0;
  padding: 0;
}


body {
  background-color:#d7d7e8;
}

/*************************************************
NAV
*************************************************/
header {
  width:100%;
  float:left;
  margin:0 0 30px 0;
  background-color:cyan;
}

/**************************************************
PORTFOLIO PAGE
***************************************************/
#wrapper {
  max-width:1550px;
  margin:0px auto;
}

#gallery li {
  width:30%;
  float:left;
  list-style:none;
  margin:0% 10%;
}

img {
  max-width:100%;
}

a img {
  margin-bottom:-20px;
}

a p {
  background-color:#ffffff;
  text-align:center;
  padding:5px;
  border-radius:0 0 6px 6px;
}

li a, header a {
  text-decoration:none;
  color:#58585b;
}
＆＃13; 
<header>
      <a href="#">
        <h1>Jason K</h1>
        <h2>Bum</h2>
      </a>
    </header>
    <div id="wrapper">
      <section>
      <ul id="gallery">
        <li>
          <a href="#">
            <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">
            <p>sample sample sample</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">
            <p>sample sample sample</p>
          </a>
        </li>
      </ul>
      </section>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题