box-sizing: border-box;としてboxを左右に並べて表示すると

Question

みなさんこんにちは

boxを2つ左右に並べて表示したいと思います。
余白を10pxとりつつ、幅を%で指定しようと思い以下のようにしました。
boxが左右に並ぶことを期待したのですが、右側のボックスは下に表示されます。
幅を縮めると左右に表示されますが．．．

気体と違う動作になってしまうのはどうしてなのでしょうか？
box-sizing: border-box;とすれば幅はmargin分も含めるはずなので、60%+40%=100%だと思うのですが．．．
よろしくお願いします。

html側で

<div id="left">〜内容〜</div> <div id="right">〜内容〜</div>

css側で

#left {
display:inline-block;
box-sizing: border-box;
margin-left:10px;
margin-top:10pxx;
margin-bottom:10px;
width:60%;
}

#right {
display:inline-block;
box-sizing: border-box;
margin:10px;
width:40%;
}

Answer 1

inline-blockで要素を横並びにする際、HTMLソースの書き方として普通は要素ごとに改行しますよね。
ところが、この要素と要素の間の改行コードが非ゼロ幅文字と判定されることで要素間にわずかな隙間が開いてしまうのが原因です。

この現象は #left と #right それぞれに "border: black solid 1px;" を指定して枠線を表示してみるとわかると思います。

これを回避するにはいくつかの方法がありますが、もっとも原始的な方法は要素ごとの改行をやめて、次のように一行に書くことです。

<div id="left">～内容～</div><div id="right">～内容～</div>

ただ、当然ながら<div>の内容が複雑になるほど、このようなコーディング方法は現実的ではありませんよね。
これ以外の回避策については、"inline-box 隙間"等で検索するといくつかヒットすると思いますが、シンプルなのは #left のスタイルに "float: left;" を追記する方法だと思います。

以上、ご参考になれば。

Comments

[D.O]

コメント有難うございます。

実は、書いてありませんでしたがleft,rightの親要素にFont-size:0pt;を入れてあるのですが、これではダメなのでしょうか？

[tkanda]

親要素のフォントサイズをゼロに設定できるならその方法でもOKなはずですが、うまく行きませんか？

試しに、ライブデモをこちら( https://jsfiddle.net/hqousav9/1/ )に作ってみましたので、CSSの記述内容等を比較されてはいかがでしょう。

[tkanda]

あ、ちょっと待ってください。その前に・・・

inline-block 指定の場合、width の計算に含まれるのは 矩形の横幅＋パディング＋ボーダー幅であって、マージンは含まれません。
なので、#left の "margin-left: 10px;" や #right の "margin: 10px;" はNGです。

[D.O]

そうですね！
まったくお恥ずかしいミスです。全然勘違いでした！
margin分を考慮したらうまくいきました。
ありがとうございます。