将横幅与文本分开

Question

我正在尝试将文本 header 与 eBay 列表的横幅分开。这是代码：

body {
  background-color: #cccccc;
}

#banner {
  position: top;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 275px;
  z-index: 1;
}

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

我尝试在 header 之前添加换行符以将 header 与横幅分开，但这在所有查看监视器中并不一致。我在 "height" 中将 px 转换为 em 并添加了四个中断，但这也不起作用。非常感谢。

Answer 1

尝试实施 margin-top。

<style>
  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }
  
  h1{
    margin-top:150px;}
</style>
<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>

<h1 style="font-family:helvetica">[Header text]</h1>

更新： 您还可以使用百分比来显示页边距顶部，以便在不同的浏览器上获得更一致的视图。或者，您可以将其放入一个 div。然后你就不需要指定 margin-top.

  body {
    background-color: #cccccc;
  }
  #banner {
    position: top;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 275px;
    z-index: 1;
  }

<div id="banner">
  <img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">


<h1 style="font-family:helvetica">[Header text]</h1>
  
  </div>

将横幅与文本分开

Separating banner from text

html

css

header

banner