"

css inline-blockでできるスペース(空白)を消す方法

「display」っていうCSSに最近追加された「inline-block」ってのがありまして。

たとえば、
「画像+その下に解説文」っていうものをページ内にたーくさん並べたかったり、単純に2カラムのサイトを作りたかったりと、要素を横に並べたいときに使うんですが、
いままではblock要素に対して「float」ってやつを使ったり「display」を「inline」にしてこねくりまわしてたんですよ。(正式な使い方ですけどね)

しかし!floatは癖が強すぎていまいち思い通りに動かない。枠にはめて使ってみてもなんだかんだで、

ずれまくる。

inlineはまぁ、便利ではあるけど、blockからinlineに変更するからblockの良さが0になる。

そこで出てきたのが「inline-block」なんですよね。もっとこうしてほしいっていうのはあると思いますが、
inlineとblockのいいとこどり的な立場で。初めてみたときは本当に嬉しかった。本屋で立ち上がりました。((笑)

さて本題です。まぁ、そんなinline-blockですが、バグってるんですよね(笑)

基本的に改行され縦に並んでしまうものを横一列にするのが役目なのに、

改行コードか何かで空白ができるんです。

で、その回避方法なんですが、とりあえず3つあります。

1.ソースコードで改行しない
改行コードが空白の素ならそりゃ解決しますが、完成してからならまだしもねぇ・・・

2.CSSでなんとかする
バグ処理って感じで、1度letter-spacingか何かをマイナスの値にして、実際に使うときだけ0にするって感じでした。これも、今後のブラウザ対応のときとかに突然気持ち悪い動きとかされたら嫌なので、敬遠したい。

3.コメントアウト!
ソースコードでコメントアウトします。<!– 中身 –>これですね。
不思議なことに、入れ子になっていても「inline-block」の直前の行をコメントアウトするだけでOKです。

<p インラインブロック>なんたらかんたら</p>
</div><!–
–><p インラインブロック>なんたらかんたら</p>

これで、OKですた。不思議だけどこれでOK.これは忘れてはいけないです。