web-dev-qa-db-ja.com

マージン：0およびパディング：0にもかかわらず、ページ上部のギャップ

マージンとパディングを0に設定しているにもかかわらず、サイトの上部に32pxのギャップがあります。パディングで修正できるので32pxであることがわかります：-32px。しかし、それから私は底にギャップがあります！ Firebugでは、マージンとパディングを0に設定したにもかかわらず、本文はHTML要素の先頭から32px下にしか開始されていないようです。

これが私の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で、次にコンテナ（コンテンツを含む）が続きます。

cssgaps-in-visuals
15
MrB

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

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

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

位置に設定されている他の要素についても同じことを行う必要がある場合があります：相対的でマージンがあります（例：h3タグ）

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

17
James

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

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

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
4
Pyjammez

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

1
Graham Clark

私の問題は、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>

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

1
Vincent

このdivが非常識な本体（たとえば、または他のdiv）の場合は、0pxのマージンとパディングを設定します。そしてそれはうまくいくはずです

<body>
<div class="div_with_gap">
</div>
</body>

そしてそれはそれを修正する必要があります

body{
margin: 0px;
padding: 0px;}
0
user8765020

または、CSSにエラーがあります。color #666666。存在しない : の間に。これがCSSの解析方法を間違えている可能性があります。

0
Starx