1

HTML と CSS を使用すると、ap タグと画像の間にこの垂直スペースがあります。次のようになります。

ここに画像の説明を入力

hello と画像の間に余分な垂直スペースがあるのがわかりますか? どうすればそれを削除できますか? 画像をこんにちはに近づけることができることはわかっていますが、スペースの原因を知りたいです。

私のコード:

HTML:

<div class="Box">
    <p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50"  SRC="pic.jpg">
</div>

CSS:

.Box                           //this is the parent div
{
    background-color:red;
    width:60px;
    margin:0px;
    margin-bottom: 0px;
    padding:0px;


}
.contextimg                            //this is for the image
{
    position:relative;
    margin:0px;
    padding:0px;
    line-height:0px;

}

注: body のマージンとパディングを 0 に設定しようとしましたが、うまくいきませんでした。

4

6 に答える 6

5

ブラウザが段落にデフォルトの余白を与えるのは一般的です。だから、それを取り除いてください。

マージン<p>を 0 にします。

.Box p{
    margin: 0;
}

ここで確認してください：http://jsfiddle.net/aG27X/

于 2013-05-15T09:19:27.903 に答える
4

pそれが要素のデフォルトのパディング/マージンです。使用してみてください

.Box p {
   margin: 0;
   padding: 0;
}

使用するよりも迅速な解決策が必要な場合は、Web ページをデザインする前にブラウザーのデフォルトをリセットする必要があります。

* {
   margin: 0;
   padding: 0;
}

あなたのニーズは十分です.CSSリセットスタイルシートをグーグルで検索することもできます.これらのスタイルシートは各要素を正確にリセットします.

于 2013-05-15T09:19:51.377 に答える
1

タグのパディングとマージンの上/下<p>を 0<p>に設定します。タグには、他の何かで上書きしない場合に備えて、デフォルトのパディング/マージンが自動的に設定されます。

p {
   margin: 0;
   padding: 0;
}
于 2013-05-15T09:20:29.823 に答える
1

p段落を表します。次のparagraphようにスペースが自動的に追加されます: Fiddle

次のように削除できます：フィドル

于 2013-05-15T09:21:07.117 に答える
0

あなたの問題が何であるかはわかりませんが、このフィドルから: http://jsfiddle.net/u6C9E/

p { margin: 0; padding: 0; }

動作します。

于 2013-05-15T09:22:10.050 に答える