4

私は次のHTMLを持っています

<body>
    <header></header>
    <h2>Title</h2>
</body>

次のCSSで

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

header {
    float: left;
    background: black;
    height: 100%;
    width: 150px;
}

http://jsfiddle.net/ZqeED/1/

IE10、Chrome 26、および Firefox 20 はすべて、上部に不要な余分なスペースとスクロール バーを表示します。

h2 要素を削除すると、このスペースが消えます。

私の質問は、何が起こっているのですか? スペースが追加されている理由を説明する HTML レイアウト ルールはありますか?

4

3 に答える 3

8

これは、マージン崩壊の奇妙なケースの 1 つです。2 つのブロック レベル要素の垂直マージンは、通常のフローでは常に崩壊します。この場合の 2 つの要素は<body>と<h2>です。<h2>通常のフロー (float、絶対位置) から外すか、その表示を に変更するとinline-block、マージンが崩壊せず、<body>

http://jsfiddle.net/ZqeED/2/

2.1仕様から：

「要素の余白が親の上余白と一緒に折りたたまれている場合、ボックスの上端は親と同じになるように定義されます。」

<h2>これは、上のマージンが上のギャップを追加している理由を説明しています-前に述べたように、フロートする場合、上マージンのエッジ<body>の絶対的な位置または変更は親の境界エッジと同じになり、「ギャップ」は消えます:display: inline-block;<h2>

http://jsfiddle.net/ZqeED/4/

于 2013-04-28T16:57:33.053 に答える
1

これは、<header>要素がフローティング要素として表示されていることが原因です。デフォルトでは、ブロック レベルの要素は水平方向に拡張して親コンテナー全体を埋め、フローティング コンテンツの背後にも拡張します。

ブロック レベルの<h2>要素は、実際に0,0は画面の左上のポイントで明確に開始され、そこからデフォルトの margin-top が適用されてテキストが押し下げられます。以下に示すように、フローティング 要素<header>はそのマージンから開始して、新しいテキスト位置にインライン化されます。

要素の寸法の検査

<h2>これを回避する簡単な方法は、マージンの代わりにパディングを使用することです (すべての上ではなく上にスペースが必要な場合)。jsFiddle の例を参照してください。

于 2013-04-28T17:12:23.410 に答える
1

この問題はマージンの崩壊と呼ばれます

修正するには、次を追加します。

 h2
 {
     padding: 0;
     margin: 0;
 }

そして、問題はなくなりました。

別の解決策は、float: left または display: inline-blockに追加することですh2

働くフィドル

于 2013-04-28T16:57:18.410 に答える