0

以下のコードを使用して、divを水平にスタックしました。

.basic {
    width:100px;
    position:relative;
    display:inline-block;
    border: 1px solid red;
    text-align:center;
    margin:0;
    padding:0;
}

#container {
    white-space: nowrap;
    border: 1px solid black;
    width:300px;
    overflow:auto;
}

'container'はwhite-space:nowrap、子を水平方向にスタックするために持っています。ただし、横向きの子供は右側にスペースがあります。これがデモを示すフィドルです。ボックスのレイアウトを調べると、余白/パディングがないようです。しかし、それを押し出すいくつかの神秘的な「暗黒物質」：P

奇妙なことに、私のアプリケーションのさまざまな場所で同じコードが使用されていますが、この異常は、次の画像に示すように1つの場所に表示されます。

ここに画像の説明を入力してください

上部の文字化けしたテキストについて心配する必要はありません。divをまだ時計回りに90度回転していません:)ただし、画像の下部に注意してください。テキストボックスのdivは互いに固定されていますが、上部のdivは固定されていません。これらは上記と同じCSSを使用しますが、構造が異なります。上部のDivには2つのフロートがあり、下部に向かって矢印が付いたdivによってクリアされます。したがって、「未確認」はそこに浮かんでいません。HTML / CSS全体を投稿するのではなく、フィドルで問題を再現しました。

私が理解できないのは、マージン/パディングが0になった後でもdisplay:inline-block、子divの場合、なぜまだスペースがあるのか​​ということです。これはここで何度も聞かれていると思いますが、なぜこれは一度だけ起こり、別の場所では起こらないのでしょうか？その上、どのように「それを修正する」のが最善ですか？

4

1 に答える 1

2

display: inline-block現在の要素と次の要素の間に空白が存在する場合、右にマージンを置きます。このスペースは、4px と現在の font-size (s) の積として計算されemます。このフィドルの 1 行目と 2 行目の違いに注意してください: http://jsfiddle.net/MkasM/

あなたの場合、これmargin-right: -4pxは変更していないため、設定するだけで制御できますfont-size。

詳細はこちら: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

また、要素に 'box-sizing: border-box' を指定していない場合は、指定することをお勧めします。ブロック内に「パディング」とボーダー幅が含まれるため、レイアウトに干渉しません。
読むには: http://paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-09-16T01:19:31.703 に答える