0

表示: インラインブロック; プロパティには、何をしようとしてもクリアできないパディングとマージンがあるようです。他の誰かがこのバグに遭遇し、それを修正する方法を知っていますか?

4

2 に答える 2

2

インライン ブロックを使用する場合、マークアップの書式設定に使用した空白がレンダリングされることに注意してください。これは、永続的なパディングまたはマージンと誤解される可能性があります。

于 2012-10-31T16:26:23.790 に答える
2

inline-blockマークアップの要素タグ間に少なくとも 1 つのスペースまたは改行があることが原因である可能性が最も高いです。

inline-block改行は、要素間の単一のスペースに変換されます。したがって、表示されている余分なスペースはパディングやマージンではなく、含まれている要素のテキスト内の実際のスペース文字です。

いくつかの回避策があります。

  1. マークアップを変更して、改行を削除または再配置します。

    <ul>
    <li>item</li>
    <li>item</li>
</ul>
<!-- becomes -->
<ul>
    <li>item</li><li>item</li>
</ul>
<!-- or -->
<ul>
    <li>item</li><li>
        item</li>
</ul>

  2. ブロック要素をインラインで表示するには、 の代わりにfloat: leftまたはを使用します。これにより、含まれている要素がclearfixedであることを確認する必要があるなど、他の問題が発生することに注意してください。float: rightinline-block

  3. word-spacing: -1em包含要素に設定します。inline-block要素にテキストが含まれていて、このテキストに不安定な単語間隔を持たせたくない場合は、継承さword-spacing: normalれたルールをインライン要素でオーバーライドする必要があることに注意してください。デモ: http://jsbin.com/ucivel/1/edit

于 2012-10-31T20:02:34.087 に答える