28

次のようなコードがあります。

        <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;
}
4

4 に答える 4

74

表示を追加: ブロック; .separator イメージに。

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

問題は、画像の上下に少し魔法のスペースが追加されることがあるということです。画像要素を要素として扱うときはいつでもこの問題が発生し*block*ます。

于 2010-10-16T01:02:23.657 に答える
12

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

修正：

img {
   vertical-align: middle;
}

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

于 2013-09-10T19:50:24.657 に答える
0

参照するスクリーンショットがないので、あなたが何を望んでいるかについて私は暗闇に残されているので、これはすべて推測です.

class="separator"水平線でコンテンツを分割しようとしていることから推測しています。<hr />その場合、適切なスタイリングで使用するべきではありませんか?

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

視覚的に意味をなさないので、セパレーターをテキストにぴったり合わせたい理由がわかりません。

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

  1. margin-bottom: 0;上に設定<p>
  2. 区切り記号の直前に下マージンの要素が常にあると想定している場所に設定margin-top: -*px;します.separator*px
  3. #sc p:last-child { margin-bottom: 0; }古いバージョンの Internet Explorer でサポートできるようにするためのIE9.js

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

于 2010-10-16T00:59:46.230 に答える
-4

これは、タグの間に空白があるためです

行う：

</div><img class="separator" src="images/separator.png" />
于 2010-10-16T00:46:44.777 に答える