Div「デフォルトマージン」はどこからともなく

StackOverflow https://stackoverflow.com/questions/1177675

  •  19-09-2019
  •  | 
  •  

質問

私がCSSとHTMLで書いた多くの行の後でも、CSS -Behaviourはまだ私を驚かせることができます - 悪い方法で。

私は友人のためのサンプルサイトをまとめて、彼が彼のレイアウトをどのように構築することができるかを彼に示していましたが、Firefox 3.0.5とIE8は私の#Header、＃Content、および＃Footer-Divsの間にどこからともなくマージンを作成しました。 IE7モードに切り替えると、マージンが消えます。

CSS：

html, body {
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
}

#page {
   background-image: url('bg_gradiant.png');
   background-repeat: repeat-y;
   width: 950px; /* 770px + 2 * 90px; */
   margin: 0 auto;
   padding-left: 90px;
}

#header {
   width: 770px;
   margin: 0;
   padding: 0;
}

#header #row1 {
   background-color: #9ab3ba;
   height: 50px;
}
#header #row2 {
   background-color: #517279;
   height: 50px;
}

#content {
   width: 770px;
   background-color: #d7e9ed;
}

#footer {
   background-color: #5eb6cc;
   width: 770px;
   height: 150px;
}

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Test</title>
</head>
<body>
<div id="page">
   <div id="header">
      <div id="row1"></div>
      <div id="row2"></div>
   </div>
   <div id="content">
      <p style="height: 600px">Beware of the Content</p>
   </div>
   <div id="footer">
   </div>
</div>
</body>
</html>

このページをこちらで表示できます。 https://codepen.io/lx-s/pen/erropl

IE開発者ツールとFireBugを閲覧すると、これらのDivに設定されたデフォルトのマージン値ではないことがわかりましたが、見ることができるように、それらはそこにあります。あなたが私にそれらを取り除く方法のヒントを与えることができることを願っています - それは私を真剣に私を狂わせていることです。

前もって感謝します！

役に立ちましたか？

解決

それはdivではなく、デフォルトでマージンを設定したpタグです。テストして0に設定すると、スペースが消えました。

他のヒント

StyleSheetに以下を追加します。

* {
    margin: 0;
}

マージンは#content divのPタグにあります

これがあなたを少し助けてくれることを願っています

リセットCSSを使用する必要があります。開発するすべてのWebページ/サイトでこれを行う必要があります。優れたリセットCSSは、デフォルトの設定の多くを削除し、クロスブラウザーの外観と感触をはるかに低下させます。

これらのいくつかがあります エリック・マイヤー または Yahoo UIリセットCSS.

これを以前に見たとき、パディングボトムを追加しました。

それが役立つことを願っています

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top