1pxの隙間を無くす

まだ私はウェブデザイナーになってから1年あまりとなりますが、それくらいになると、1pxでもずれていたりするのが気になりますよね。

それで、marginとか設定していないのに、なんか隙間できてるって思って調べても解消しない!それでベテランの方に聞いた方法を記載しました。

 

1,display:inline-block を使わない。

なんか横並びにする時って、display:inline-blockを使うってのが、私的には常識だったんですが、これを使うと入れてもいない隙間が登場しちゃうんですよね。

その代わりにfloat:leftを使います。理想としては<li>を使いましょう。

それでfloatを使うときは親要素にoverflow:hidden; を入れましょう。float:leftを入れるのは子要素に入れましょう。

 

1,letter-spacing:-4; を使用する。

これも横並びでうろ覚えで申し訳ないんですが、画像ならびで見えない隙間ができるときに使ったら隙間が解消された気がしました。もしかしたらvertical:align; と併用するかも