2

div ブロック間のスペースに問題があります:

<div id="maincontentwrapper" >
  <img src="images/content-top.png" alt="main content border image" border="1" />
  <div id="maincontent" >
    <div id="pagecontent">
       <h1>Mission Statement</h1>
    </div>
  </div>
  <img src="images/content-bottom.png" alt="main content border image" />
</div>

これは、完全に縁取りされた画像を含むページを作成しています。すべて問題ありませんが、pagecontent 内のブロック レベル要素 (例: ヘッダー) を入力するとすぐに、content-top.png 画像と maincontent div の間にギャップが生じます。

最初の文字を改行なしのスペースや単なる文字など、インラインに変更すると、ギャップは表示されません。

これは（関連する）cssです：

img {
 margin: 0;
 padding: 0;
}
#maincontentwrapper { 
}
#maincontent {
 background-image: url('../../images/content-main.png');
 background-repeat: repeat-y;
 min-height: 300px;
 width: 757px;
}
#pagecontent {
 width: 625px;
 margin-left: auto;
 margin-right: auto;
}

助けてくれてありがとう

4

5 に答える 5

3

おそらく、デフォルトでブラウザによって適用されるマージンです。コードを試してください

h1 { margin: 0; }

CSSに追加されました。それは役に立ちますか？

(h1要素は、これに「苦しむ」唯一のブロックレベル要素ではなく、pほとんどのブラウザーでもデフォルトのマージンを持っています。)

クライアントのブラウザが CSS3 をサポートしていると確信している場合、バックアップ メカニズムがある場合、または単に気にしない場合は、次のようにすることができます。

.maincontent :first-child, .maincontent :first-child :first-child {
    margin: 0;
}

これにより、要素のタイプに関係なく、最初の子のマージンが 0 に設定されます。

他にできることは、ブラウザのデフォルトをゼロでマスクして元に戻す「スタイルシートのリセット」を適用することです。ただし、ブラウザのデフォルトはほとんどの場合、実際には意味があり、すべてをリセットすると問題が発生する可能性があるため、そうすることはお勧めしません。

于 2010-08-04T22:28:50.550 に答える
0

H1以外の要素を試しましたか? 問題は、デフォルトでマージンを持つ H1 要素に起因すると考えられます。おそらく、それが div を「押し下げ」てギャップを残すことです。ところで、CSS のテストには Firefox のプラグインFirebugを使用していますか? これは非常に強力で、オンザフライで変更できます。

于 2010-08-04T22:29:34.913 に答える
0

これは、h1 p などに適用されるような、ブラウザのデフォルトの css 設定による問題だと思います。

これを取り除く 1 つの方法は、960grid のような「リセット」CSS を使用することです。

私の経験から、それはうまくいきます:)

于 2010-08-04T22:34:22.580 に答える
0

タグは<img />デフォルトでインラインで表示されます。試してみてくださいdisplay: block。

于 2013-08-14T09:21:11.740 に答える
0

マージンが崩壊しているからかもしれません。追加してみる

パディング: 0 1px 0 1px;

img または div またはその両方に。

于 2010-08-04T22:43:24.790 に答える