2

MyPage.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
    <div id="title">
        <h1>Color Flash Cards</h1>
    </div>
</div>
</body>
</html>

index.css

body{
    background-color: #31859C;
    margin-left: 0px;
    margin-top: 0px;
    overflow-x: hidden;
}
#header{
    margin-top: 0px;
    height: 120px;
    background: #9838CE;
}
#title{
    margin-top: 0px;
}

結果：

ゴーストマージン

上部 (紫の上) にある余白はどこから来るのでしょうか? そして、それを取り除くために私は何をする必要がありますか? 負の値を使用margin-topしてそれを行うこともできますが、それが「本当の」解決策ですか?

4

6 に答える 6

2

次の 2 つのいずれかが原因である可能性があります。

  1. ボディにパディング？padding: 0;本体に追加。

  2. の上部余白H1。これに対抗するoverflow-hidden;には、#header

に追加overflow: hiddenする#headerと、ヘッダーDIVにその内容が含まれます ( のマージンを含むH1)。

于 2013-05-11T15:46:34.433 に答える
0

デフォルトのブラウザー設定にリセット css を使用すると、リセットされます。

http://meyerweb.com/eric/tools/css/reset/
enter code here
于 2013-05-11T15:55:59.547 に答える