DivとIMGの間のスペース？

StackOverflow https://stackoverflow.com/questions/3947113

質問

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

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

「SC」DIVと「セパレーター」IMGの間には、常に13pxのギャップがあります。

両方のマージンとパディングは、0、null、空、何にも設定されています。 argh。私はとても怒っています; 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;
}
役に立ちましたか？

解決

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

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

問題は、画像が少し魔法のスペースを追加/下に追加できる場合があります。画像要素を使用して作業しているときはいつでもこの問題があります。 *block* 要素。

他のヒント

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

修正： 

img {
   vertical-align: middle;
}

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

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

私は推測しています 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 古いインターネットエクスプローラーバージョンをサポートするために

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

それは、タグの間に白文学があるからです

行う：

</div><img class="separator" src="images/separator.png" />
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top