html - 如何在两个标签之间垂直添加空间(附:我的 margin -top 不起作用)

Question

我在构建一个网站时遇到了一个问题，即我的 h1 内容与我的导航栏重叠。我在 css 中使用了 margin-top 标签，但它不起作用。

<div class="main">

  <div class="header">
    <div class="header_resize">
      <div class="menu_nav">

        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">About Voicecom</a></li>
          <li><a href="#">Marketing Sevices</a></li>
          <li><a href="#">IT Management Services</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#"> Employement Opportunities </a> </li>
        </ul>

      </div>
      <div class="clr"></div>

      <div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
      <div class="clr"></div>
    </div>
  </div>

  <div class="hbg">
    <div class="hbg_resize">
      <img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
      <h2>Read me first...</h2>
      <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
      <a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
    </div>
  </div>
  </div>

我的 CSS 文件

body {
   margin: 0;
   padding: 0;
   width: 100%;
   color: #5f5f5f;
   font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

html,
.main {
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.clr {
    clear: both;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0px;
    line-height: 0px;
}

h1 {
    margin: -32px 0 0 0;
    padding: 24px 0;
    color: #c1c1c1;
    font: bold 22px/1.2em Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

h1 a,
h1 a:hover {
    color: #D88100;
    text-decoration: none;
}

h1 span {
    color: #ffa800;
    font-size: 40px;
    margin-top: 2000px;
}

h1 small {
    font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}

h2 {
    font: bold 24px Arial, Helvetica, sans-serif;
    color: #a3ce67;
    padding: 8px 0;
    margin: 8px 0;
}

p {
    margin: 8px 0;
    padding: 0 0 8px 0;
    font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

a {
    color: #5e8525;
    text-decoration: underline;
}

如果有人需要更多代码，请告诉我，我特此附上其中的一部分。请帮助!!!!

Answer 1

如果您只想让 h1 在页面上靠下，那么您必须删除 css 中的 span。所以它会是这样的:

body {
   margin: 0;
   padding: 0;
   width: 100%;
   color: #5f5f5f;
   font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

html,
.main {
    padding: 0;
    margin: 0;
    background-color: #fff;
}

.clr {
    clear: both;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0px;
    line-height: 0px;
}

h1 {
    padding: 24px 0;
    color: #c1c1c1;
    font: bold 22px/1.2em Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

h1 a,
h1 a:hover {
    color: #D88100;
    text-decoration: none;
}


h1 small {
    font: normal 13px/1.2em Arial, Helvetica, sans-serif;
}

h2 {
    font: bold 24px Arial, Helvetica, sans-serif;
    color: #a3ce67;
    padding: 8px 0;
    margin: 8px 0;
}

p {
    margin: 8px 0;
    padding: 0 0 8px 0;
    font: normal 12px/1.8em Arial, Helvetica, sans-serif;
}

a {
    color: #5e8525;
    text-decoration: underline;
}

<div class="main">

  <div class="header">
    <div class="header_resize">
      <div class="menu_nav">

        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="#">About Voicecom</a></li>
          <li><a href="#">Marketing Sevices</a></li>
          <li><a href="#">IT Management Services</a></li>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#"> Employement Opportunities </a> </li>
        </ul>

      </div>
      <div class="clr"></div>

      <div class="logo"><h1><a href="index.html"><span>Voicecom </span> Technologies<br /><small>Communications Any Time Any Where</small></a></h1></div>
      <div class="clr"></div>
    </div>
  </div>

  <div class="hbg">
    <div class="hbg_resize">
      <img src="images/hbg_img.jpg" width="334" height="223" alt="img" class="hbgimg" />
      <h2>Read me first...</h2>
      <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl.</strong></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie.</p>
      <a href="#"><img src="images/readmore.jpg" width="115" height="33" alt="read more" border="0" /></a>
    </div>
  </div>
  </div>