最近 float での横並びをあまり使用せずに、

inline-block を使って横並びを実装するのが私の中で話題に！

float では高さの違う横並びをする時は、親要素で囲ってあげないと行が増えた場合に上下が揃わなくなったりするので、今まで面倒でしたが、inline-block を使用することで快適に。

ただその際に要素と要素の間に空白が出来てしまいます。

html を工夫して消すことも出来ますが、可読性が著しく低下するので、

css をもっと工夫して消しましょう！

親要素 {
	display: table;
	letter-spacing: -1em;
	width: 100%;
}
子要素 {
	display: inline-block;
	letter-spacing: 0;
	vertical-align: top;
}

こんな感じで。

だがしかし！ 親要素に display: table; が使えない時には

親要素 {
	letter-spacing: -0.285529em;
}
子要素 {
	display: inline-block;
	letter-spacing: 0;
	vertical-align: top;
}

な感じでも対応できます！