1

<h2>タグのすぐ下に<h1>タグがある場合、2 つのタグの間に大きなギャップがあることに気付きました。パディングやマージンは設定されておらず、normalize.css を使用して css を正規化しました。このギャップはなぜ存在するのでしょうか。

ここでフィドル：フィドル

スクリーンショットは次のとおりです。

スクリーンショット

html (この html では normalize.css がアクティブです)

<div class="header">
    <div class="wrapper">
        <h1>Portfolio of...</h1>    
        <h2>Jing Xue</h2>
    </div>
</div>

CSS

.wrapper {
    width: 940px;
    margin: 0 auto 0 auto;
}

/* header ------------------------------------------------------------------ */

.header {
    text-align: center;
    padding: 40px 0 0 0;
    margin-bottom: 40px;
}

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    /* margin-bottom: -50px; */
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
}

さらなる質問

「...のポートフォリオ」と「Jing Xue」の間のこの大きなギャップの理由が何であれ、対応する上/下マージンを負にするためにギャップを減らす正しい方法はあります<h..>か?

4

2 に答える 2

5

h1throughh4タグにはデフォルトのマージンがあります。CSS でそのマージンを削除する必要があります。

.header h1 {
    font-family: 'Delius Swash Caps', cursive;
    font-size: 250%;
    color: rgb(200,50,50);
    margin:0;
}

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin:0;
}
于 2013-03-30T19:31:19.487 に答える
1

これは、これらの要素の正常な動作です..

margin-top要素のデフォルトをオフにするのを忘れましたh2。クラスに追加margin-top:0px;するだけです。h2

これは動作中のjsFiddleです。

クラスは次のようになります。

.header h2 {
    font-family: 'Playfair Display SC', serif;
    font-size: 450%;
    color: rgb(59,67,68);
    margin-top:0px;
}

要素のいくつかのデフォルト スタイルに関するW3の画像を次に示します。

ここに画像の説明を入力

要素のデフォルト スタイルの詳細については、W3.orgを参照してください。

于 2013-03-30T19:31:57.293 に答える