Question

我对编码比较陌生。我正在玩一个页面，我在页面的顶部有导航栏。直接在下面，我想要一个带有页面徽标和图像顶部描述的图像。

我遇到的问题是导航栏和图像之间有一个空白区域。

如果我删除标题中的单词（徽标，描述），那么图像就像我想要的那样与导航栏齐平。但是，如果将单词放回标题中，则空格会再次分隔我的两个元素。我不确定为什么这会考虑标题的较大容器。

任何人都可以帮我删除元素之间的空格。

顺便说一下，这是我第一次发帖提问，所以我不确定我是否正确地这样做了。下面是我的html和css代码。提前致谢。

HTML：

<body>

<div class='top-bar'>
    <nav>
      <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Destinations</a></li>
        <li><a href='#'>Languages</a></li>
        <li><a href='project1-about.html'>About Us</a></li>
      </ul>
    </nav>
</div>
<header>
<h1><span>Project 1</span></h1>
<p class='kicker'>Traveling // Exploring // Coding</p>
</header>

CSS：

header {
    height: 450px;
    background: url('http://gratisography.com/pictures/17_1.jpg') center center; 
    background-size: cover; 
    margin: 0; }

header p {
    font-family: Cinzel; }


.top-bar  {
    width: 100%;
    height: 50px;
    background-color: red;
    margin: 0; }


nav {
    float: right;
    margin: 0px 30px 0 0;
    height: 50px; }

nav li {
    display: inline-block;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase; }

nav a {
    text-decoration: none;
    color: white;
    font-family: Cinzel; }

 nav a:hover {
    color: grey; }

h1 {
    text-align: center;
    font-size: 72px;
    font-family: Cinzel;
    weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: .05em; 
    clear: both;
    padding-top: 100px; }


.kicker {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    color: white;
    line-height: 1;
    position: relative; }

span  {
    display: inline-block;
    padding: 0.2em 0.5em;
    border: white solid 10px; }

Answer 1

这种情况正在发生，因为您还没有完成CSS reset。您的H1标签和其他元素仍然具有浏览器默认的CSS属性，如边距和填充，这会导致此行为。

修正：

header h1 {
  margin: 0;
}

查看我的jsfiddle。

Answer 2

请试试这个：

我添加了margin-top：0到h1。

h1 {
    text-align: center;
    font-size: 72px;
    font-family: Cinzel;
    weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: .05em;
    clear: both;
    padding-top: 100px;
    margin-top: 0
}

Answer 3

在margin:0代码中添加h1。在标记中，h1代码采用其默认margin，因此当您重置 css 时它应该工作。看看 JSFIDDLE.

header {
  height: 450px;
  background: url('http://gratisography.com/pictures/17_1.jpg') center center;
  background-size: cover;
  margin: 0;
}
header p {
  font-family: Cinzel;
}
.top-bar {
  width: 100%;
  height: 50px;
  background-color: red;
  margin: 0;
}
nav {
  float: right;
  margin: 0px 30px 0 0;
  height: 50px;
}
nav li {
  display: inline-block;
  margin-left: 20px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
nav a {
  text-decoration: none;
  color: white;
  font-family: Cinzel;
}
nav a:hover {
  color: grey;
}
h1 {
  text-align: center;
  font-size: 72px;
  font-family: Cinzel;
  weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: .05em;
  clear: both;
  padding-top: 100px;
  margin: 0
}
.kicker {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: white;
  line-height: 1;
  position: relative;
}
span {
  display: inline-block;
  padding: 0.2em 0.5em;
  border: white solid 10px;
}

<div class='top-bar'>
  <nav>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li><a href='#'>Destinations</a>
      </li>
      <li><a href='#'>Languages</a>
      </li>
      <li><a href='project1-about.html'>About Us</a>
      </li>
    </ul>
  </nav>
</div>
<header>
  <h1><span>Project 1</span></h1>
  <p class='kicker'>Traveling // Exploring // Coding</p>
</header>

两个元素之间的空间

3 个答案: