1

display: inline-blockコンテンツがデバイスの幅を超えた場合に水平方向に拡張することになっているコンテナー div に一連の要素があります。それはすべてうまく機能.itemしますが、ここでわかるように、各要素の間に奇妙なマージンがあります: http://julienlima.com/

画像間の青い線に注意してください

（画像間の青い線に注意してください）

<span class="fix item">
<img src="image.jpg" data-ratio="1.33" data-width="800" data-height="600" />
<div class="fix details">
    <div class="fix row"><a href="#" class="title">title</a></div>
    <div class="fix row"><div class="date">date</div></div>
    <div class="fix row"><a href="#" class="view">View Post</a></div>
</div>


#gallery {
    clear: both;
    width: auto;
    white-space: nowrap;
}

#gallery .item {
    display: inline-block;
    *display: inline;
    width: auto;
    min-width: 100px;
    white-space: nowrap;
    border-right: 1px #CCC dotted;
    border-bottom: none;
    padding: 0 25px;
}

#gallery .item:first-child {
    margin-left: 25px;
    border-left: 1px #CCC dotted;
}

それを台無しにするマージンやパディングはありません。なぜフローティングではなくこのように動作するのかわかりません。何か案は？

4

3 に答える 3

3

これは、HTML マークアップの空白や改行が原因です。コードでそれらを削除すると、余白も消えます。「インライン」要素とdisplay: inline-block.

于 2013-09-20T23:02:20.927 に答える
3

ヨーダ、

これは、.item 要素の表示タイプが原因で発生します。display:inline-block を設定すると、スペースを残さずに要素をスタックしません。float:left を設定したときのように、要素はスペースなしで互いに積み重ねられます。

修正は、font-size:0 を親要素に設定することです。あなたの場合、 #gallery には font-size:0 が必要です。

于 2013-09-20T23:04:11.747 に答える
1

display: inline-block要素がインライン (単語など) とブロック (div や画像など) の両方として処理されることを意味します。これは、行の高さ、単語の間隔、および単語の折り返しがあり、インライン要素と同様にテキスト整列の影響を受けることを意味します。設定してみてください：

word-spacing: 0;

後

display: inline-block;

これで修正されるかどうかを確認します。

于 2013-09-20T23:09:09.667 に答える