html - div 間のギャップ

Question

idタグラインのdivを、同じものと画像の間にギャップがないように表示したい。それはどのように可能になりますか？

これがフィドルです...

これはうまくいきませんでした

#tagline {
    margin-top:0;
height: 50px;
background-color: aqua;
}

score 4 · Accepted Answer

画像は必要でdisplay:block;、余白はありませんp

img {display:block;}
p {margin:0;}

score 1 · Accepted Answer

1

p からもマージンを削除する必要があります。

#tagline p { margin-top:0; }

于 2013-10-20T14:00:39.883 に答える

score 1 · Accepted Answer

Moob 's answer をblock使用するか、この css3 を使用してくださいflex。注意: これはSafari と IE ではサポートされていません:

img{display:flex;}
p { margin-top:0; }

score 0 · Accepted Answer

CSS リセットを使用することをお勧めします。多くの要素にはデフォルトのパディングとマージンがあります。あなたの場合、パディングとマージンがあったのはdivp内のタグでした#tagline

#tagline p {
    margin: 0;
    padding: 0;
}

動作中のデモ(css リセットはありません。また、メニューに clearfix が追加されています)

score 0 · Accepted Answer

常にリセットスタイルを使用する

* {
    margin: 0;
    padding: 0;
}

img パディングは、img 表示属性がインラインに設定されているためです (デフォルト)。以下のコードはこれを修正します。

img {
    display: block;
}

5 に答える 5