0

3 つの div から Web サイトを構築しましたが、div 間に厄介な問題があります。欲しくないスペースがあります。これは私のウェブサイトのマークアップです:

  <div id="upbox">
    <h1 class="headline1">...</h1>
  </div>
      <div id="navig">

          <table align="center" cellspacing="0" width="60%" cellpadding="0" dir="ltr">
                <tr>
                    <td><a href =url> home </a></td>
                    <td><a href =url> Reviews </a></td>
                    <td><a href =url> Upcoming </a></td>
                    <td><a href =url> Xbox 360 </a></td>
                    <td><a href =url> Xbox One </a></td>
                    <td><a href =url> PS3 </a></td>
                    <td><a href =url> PS4 </a></td>
                    <td><a href =url> PC </a></td>
                    <td><a href =url> Contact Us </a></td>
                </tr>
            </table>

      </div>
    <hr />

   <div id="mainbox">
    <br/>
    <br/>
    <p class="imgfirst"><img src="Images\characters.jpg" width="70%"></p>

   </div>

そして私のcssは：

#mainbox {
  width: 1000px;
  margin:0 auto;
  background-color: white;
  border: 2px solid;
  border-color: #970c0c;
}

#upbox {
  background-color: #1e1e1e;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  clear:none;
}

#navig { background-color: #970c0c; }

私はすべてを試しましたが、役に立ちません。私に何ができる？

これが私の現在の結果です。

迷惑な間隔のスクリーンショット

4

3 に答える 3

5

h1、hrおよびbody要素に関連するマージンがあるため、CSS に次を追加します。

h1 { margin:0; }
hr { margin:0; }
body { margin:0; }

デモ: http://jsfiddle.net/4gq3b/3/

Reset CSSスタイルシートの使用を検討してください。基本的にこれは、CSS を適用する前にブラウザベースのルールや省略を無効にすることで、結果を可能な限り普遍的に保つ方法です。

また、 を設定する理由があると思いますが#mainbox { width:1000px; }、少し奇妙に見えます。属性を外すと全てdivs同じ幅になりwidthます。

于 2013-11-01T11:36:34.473 に答える
0

また、div 内のブロック レベル要素のマージンを調整する必要があります。

 #upbox h1{ margin: 0; }

明らかに、これらの休憩は#mainbox空白も作成します。

于 2013-11-01T11:36:45.490 に答える