内容の前に
今週でWeb業界に転職してちょうど1ヶ月が経過する。
ほぼほぼ未経験で始めて、日々HTML,CSSを学んでいる毎日。
日々ぶつかる壁を忘れないようにまとめるとともに、もし同じようなことで悩んでいる人の助けになればなおよし。
display: inline-block; と float: の使い分け
ブロック要素を横に並べたい場合、display: inline-block; を使い、floatはあまり使わない。
floatを使うときは、画像の横に文章を回り込ませたい時など。
display: inline-block; は、vertical-align: top; または vertical-align: bottom;
を使えば、高さやボトムを揃えることができる。
display: inline-block; を使う時3点セット
- display: inline-block; ←子要素に対して
- vertical-align: top; または vertical-align: bottom; ←子要素に対して
- font-size: 0; ←親要素に対して
※ 2によって高さまたはボトムを揃える。
※ 3によってinline-block指定時に生じる隙間をなくす。子要素にfont-size指定するのを忘れないように。
ブラウザ表示とコーディング例
ついでに、、n番目だけ違う条件にする場合
（子要素のclass名は揃えておいて子要素に適用）
コーディング例の通りだが、定義は以下の通り。
(コーディング例では、5番目の.boxだけmargin-rightが0になるよう、margin: 0;としました。)
書式
E:nth-child(n) {プロパティ名:値;}
適用対象
n番目の子となるE要素
参考URL
display: inline-block指定時にできる隙間を消す方法
float と inline-block と flex-box の使い分け
letter-spacing－スタイルシートリファレンス
E:nth-child(n)－スタイルシートリファレンス
最後に
コードの貼り方とか汚くてすみませんが、
ご指摘やもっといい方法などあればどんどんいただけると幸いでございます。
今後も頑張って上げていきます。