16

マージンとパディングを 0 に設定しているにもかかわらず、サイトの上部に 32 ピクセルのギャップがあります。しかし、私は底にギャップがあります！Firebug では、マージンとパディングを 0 に設定しているにもかかわらず、ボディは HTML 要素の先頭から 32 ピクセル下にあるように見えます。

これが私のCSSです：

html {
  height: 100%;
  padding: 0;
  margin: 0;
}

body { 
  background-color: #a7a9ac; 
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

コンテナ バナーは最上位の div で、その後にコンテナ (コンテンツを含む) が続きます。

4

7 に答える 7

19

これはposition: relativeの使用と、デフォルトでマージンを継承する h1 要素が原因だと思います。position: relative を使用すると、余白は実際のコンテンツに合わせてシフトされていないように見えるため、ページの上部に適用されます。

これを修正するために、関連する CSS を変更しました。

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

position: relative に設定され、余白がある他の要素 (例: h3 タグ) についても同じことを行う必要がある場合があります。

このような動作を予測するのはやや難しいため、位置相対の使用を減らすのが最善です。

于 2011-05-06T09:18:41.850 に答える
4

wphead()WordPress は;を使用して管理バーに自動的に追加されます。あなたと私はおそらく管理バーのものを何らかの形で削除したため、空に見えるだけですが、管理バーの詳細を残していればそこにあるでしょう.

これを functions.php に追加して削除します。

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
于 2011-12-28T02:11:26.813 に答える
1

意味はよくわかりませんが、問題は無効なHTML（正しいDoctypeを使用していることを確認してください）またはクラスのpadding-top: 20px;ルールにあると思います。container

于 2011-05-06T09:00:48.203 に答える
1

私の問題は : DIV の最初の子タグである H2 html タグが、div の上にギャップを引き起こしました。

css 'margin(-top)' プロパティを使用すると、このようなギャップが予想されます。ただし、DIV には (継承された) "margin(-top)" CSS プロパティがありませんでした。

H2 の子を削除すると、予期しないギャップが削除されますが、適切な解決策ではありません。

問題を真に解決するのは、DIV の CSS プロパティ「display」を「inline-block」に設定することです。結果として、不要なギャップなしで H2 (または Hx) を使用できます。

<div style="display:inline-block">
  <h2>blabla</h2>
</div>

これがあなたの問題を解決する答えであることを願っています!

于 2013-04-20T17:12:33.643 に答える
1

私はまったく同じ問題を抱えています。

私が（少なくとも今のところ）解決した方法は、次を使用することです。

* {
    margin-top: 0;
}

私のスタイルシートの一番上に。

これにより、すべての要素の上部マージンがゼロに設定されるため、これを理解して使用し、「margin-top」プロパティを何度も定義する必要がある場合があることを理解して使用してください。

サム

于 2015-08-22T02:53:27.583 に答える
0

または、CSS にエラーがありますcolor #666666。間にありません:。それが原因で、CSS が間違った方法で解析されている可能性があります。

于 2011-05-06T09:05:36.210 に答える