実践で学ぶRuby on rails 〜仮説千本ノック〜

プログラマーとして独立するため日々スキルアップに励んでいます。優れたプログラマは仮説を立てるのがうまい。そこを目指して仮説を立てては検証する日々です!!

inline-block要素間の原因不明な余白の消し方

やりたいこと

意図せずにinline-block間に生じた原因不明の余白(marginもpaddingも0にも関わらず)を取り除きたい。

 

実はこれ、正体は半角スペースなんです。

もっと言うと、inline-blockが二つ続けば、自動的に改行が行われ、その改行が半角スペースとして扱われるんです。

 

解決方法

そこで、その半角スペースをなくす方法ですが、

そもそもスペースは、font-sizeに比例してサイズが決まるので、二つのinline-blockを包含している親要素のfont-sizeを0にしてしまえば消えます。

 

副作用

親要素のfont-sizeを0にすると、包含されている子要素が、属性を承継してしまいますので、子要素にベット値を設定しなおしましょう。

 

例えば、子要素にキーワードを入力するinput要素があった場合、副作用により、placeholderが見えなくなりますし(placeholderはfont-sizeで表示文字の大きさが決まる)、入力もできなくなります。

font-sizeが0だと、入力もできなくなる(厳密にはできてるけど、0だから見えないだけかもしれませんが)