cssで要素を横並びにする その1

要素横並び時に隙間が空く

横並びをよく使うリストを例に

これで4つの要素が横並びになるだろうとおもってブラウザで確認すると

….いきなり想定通りいかず…..

変なスペース空いてるし4つめは次の行におちてる。

ので修正します。

原因

まずは、半角スペースの部分。

これの原因はソースファイル内で改行するとブラウザでかってに半角スペースになります。

日本語と違って英語の文章は単語の間にスペースがあるからこのほうが便利て理由らしい、事実かどうかわ知らないけど。。。

つまり

と書かれたソースをブラウザでみると
This is a pen
とまったく同じように表示される

対策1

改行しない

対策2

コメントを追加

さすがにこの2つは可読性も悪くなるので却下

対策3(おすすめ)

親要素のfont-sizeを0にして要素のfont-sizeを指定する

この結果

これでスペースは解決。

要素横並び時にborderを指定すると改行される

つづいては4つ目が落ちている件。
これの理由はborderのせい。各要素の横サイズは25%に左右合計2px分になるため4つだと100%+8px分になる
親要素の横幅に収まらないので落ちている。

対策

解決するための考え方としたら、border分も含めて25%になってくれればいいので

をliに追加する。

box-sizingにborder-boxを指定してやるとborderやpaddingの長さを要素の中に含めるよーとなる。

これはすごい便利なので個別の要素に指定するよりももっと大元で指定しておけばいいと思う。

その2へ続く