web-dev-qa-db-ja.com

divとimgの間のスペース？

私はこのようなコードを持っています：

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" />

"sc" divと "separator" imgの間には常に13pxのギャップがあります。

両方のマージンとパディングは、0、null、空、何も設定されていません。ああ。私はとても怒っています; d

私はfirebugで何が起こっているのかを理解しようとしましたが、それらの間のスペースは何にも属していません、それはマージンではなく、パディングではありません、一体何ですか？

フロート、表示設定、継承されたマージンやパディングもありません。

私のコードの何が問題になっていますか？私はHTMLの空白を削除しようとしましたが、助けにはなりません（ところで、 "sc" divの上にセパレータを置くと、多少のギャップがありますが、小さくなります）。

ありがとう。

[追加]

CSSスタイル：

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url('images/bg.png');  
    background-repeat: repeat-y;
    width: 970px;
}
htmlcssmarginpaddinggaps-in-visuals
27
fomicz

ディスプレイを追加：ブロック; .separator画像に

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

問題は、画像の上下に魔法の領域が少し追加されることがあるということです。画像要素を*block*要素。

66
Marko

画像とdivタグの間に3pxのギャップがありました。また、すべてのスタイルが0に設定されていました。本当に変です。

修正：

img {
   vertical-align: middle;
}

これは私にとっては美しく機能しました。

9
Lex Semenenko

参照するスクリーンショットがないので、私はあなたが望むものを暗闇の中に残しているので、これはすべて推測です。

class="separator"から、水平線でコンテンツを分割しようとしているようです。もしそうなら、適切なスタイルで<hr />を使用するべきではないでしょうか？

いずれの場合でも、<p>要素にはデフォルトで垂直マージンが設定されていることに注意してください。

セパレーターをテキストにぴったり合わせる理由はわかりません。視覚的に理解できないからです。

あなたが本当にそうするなら、たくさんのオプションがあります：

  1. margin-bottom: 0;に<p>を設定します
  2. margin-top: -*px;を.separatorに設定します。ここでは、下マージンが*pxのセパレーターの直前に常に要素があると想定しています。
  3. #sc p:last-child { margin-bottom: 0; }および IE9.js は、古いバージョンのInternet Explorerでサポートできるようにするためのものです。

しかし、私は繰り返します。テキストとセパレータの間にマージンがないと、私には適切に聞こえません。

0
unrelativity