DAY 32 HTML & CSS 自主練-inline blockの隙間を消す方法 【ウェブカツ】

本日のプログラミング学習

HTML & CSS / 0.5hour

Aug / 61.0hour

Total / 86.0hour

 

参考書籍

 

inline-blockの隙間を改善する方法

サイトを作成する際に、imgやテキスト、リストを横並びにして表示する際にinline-block要素にして並べる、といったことがよくありますが、CSSで調整しないとこのような隙間ができます。

inline-block_space

 

この隙間は、HTML内にある改行が悪さをしているようで、改行があると半角スペースとして認識されてしまうようです。

それを解除するためには、いくつか方法があります。

<li>タグを改行せずに記述する。

改行することで隙間ができるならば、改行しないでコードをかけばいい。

・・・・確かに隙間はなくなりますが、コードの可読性をかなり犠牲にした記述の仕方なので、これは選択肢としてあまり考えられません。

親要素でletter-spacingでマイナスの値を指定する

letter-spacingは文字間の距離を指定するプロパティ。それをマイナスにすることで隙間を埋めていく作戦。

また、子要素はletter-spacingを戻してあげるのを忘れないこと。

letter-spacing_space-reset

 

親要素で「font size: 0;」 を指定する

親要素のフォントサイズを0にすることで、半角スペースを消しちゃおう、という作戦。

同じように忘れちゃいけないのが、子要素でフォントサイズを再度指定し直すこと。

これを忘れてしまうと、大変なことになります。

 

font-size: 0px_space-reset

 

上記三つ、どれを選んでも下記のように隙間を埋めることが出来ますが、2、3のどちらかで修正していくのが可読性も高く、CSSでどのような意図でコードを書いているのかもわかり易い。

inline-block_space-reset_success

 

最新情報をチェックしよう!