0

これは以前にここで議論された可能性がありますが、関連する投稿を見つけることができませんでした. だからここに私の問題があります：

バナーとコンテンツ領域のある HTML サイトがあります。バナー領域には、下部に境界線があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TEST</title>
    <style type="text/css">
        #banner, #content {
            width: 1000px;
            margin-right: auto;
            margin-left: auto;
        }
        #content {
            background-color: green;
        }
        #banner {
            background-color: red;
            border-bottom: 1px solid rgb(200, 200, 200);
            height: 70px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <h3>Banner</h3>
    </div>
    <div id="content">
        <h3>Content</h3>
    </div>
</body>
</html>

問題は、バナーとコンテンツ div の間の水平方向の空白です (これは望ましくありません)。

ただし、border-bottomバナー div からborder-topコンテンツ div に移動すると、空白が消え、期待どおりにすべてがレンダリングされます。これは私には奇妙に思えますが、少なくとも chrome と ie9 の間で一貫しています (他のブラウザーはまだテストしていません)。この動作の理由は何ですか? h3タグが原因のようです。また、罫線の位置によってページの高さが異なります。

4

2 に答える 2

0

すべてのブラウザには、HTMl タグの独自の実装があります。すべての HTML 要素には、ブラウザーに応じて独自のマージンとパディングの値があります。マージンとパディングの値のすべての要素を「0」にリセットすることをお勧めします。次に、マージンとパディングのスタイリング値が正確に反映されます。

cssの冒頭で以下を宣言します。

*{マージン:0px; パディング:0px;}

于 2012-11-23T15:04:01.363 に答える
0

h要素の余白になります。ギャップをソートする必要がありますh3{margin:0px;}:)

編集 ：

ギャップが続く場合は、h 要素もパディングしてみてください。または、バナーとコンテンツの間の余白にエラーがある可能性があります。

于 2012-11-23T14:01:41.420 に答える