本日のプログラミング学習
HTML & CSS / 0.5hour
Aug / 61.0hour
Total / 86.0hour
参考書籍
目次
inline-blockの隙間を改善する方法
サイトを作成する際に、imgやテキスト、リストを横並びにして表示する際にinline-block要素にして並べる、といったことがよくありますが、CSSで調整しないとこのような隙間ができます。
この隙間は、HTML内にある改行が悪さをしているようで、改行があると半角スペースとして認識されてしまうようです。
それを解除するためには、いくつか方法があります。
<li>タグを改行せずに記述する。
改行することで隙間ができるならば、改行しないでコードをかけばいい。
・・・・確かに隙間はなくなりますが、コードの可読性をかなり犠牲にした記述の仕方なので、これは選択肢としてあまり考えられません。
親要素でletter-spacingでマイナスの値を指定する
letter-spacingは文字間の距離を指定するプロパティ。それをマイナスにすることで隙間を埋めていく作戦。
また、子要素はletter-spacingを戻してあげるのを忘れないこと。
親要素で「font size: 0;」 を指定する
親要素のフォントサイズを0にすることで、半角スペースを消しちゃおう、という作戦。
同じように忘れちゃいけないのが、子要素でフォントサイズを再度指定し直すこと。
これを忘れてしまうと、大変なことになります。
上記三つ、どれを選んでも下記のように隙間を埋めることが出来ますが、２、３のどちらかで修正していくのが可読性も高く、CSSでどのような意図でコードを書いているのかもわかり易い。