横並びで表示させたいときに、高さが違っても大丈夫なので便利。
inline-blockを使う上で幾つか注意点
IE7用
cssで
#sample{
display:block;
*display:inline;
*zoom:1;
}
横並びにすると改行の分、余計なスペースが入る
親要素のletter-spacingで調整
例えば、ul liで使う場合。
ul{
letter-spacing: -.40em;
}
ul li{
display:block;
*display:inline;
*zoom:1;
letter-spacing: normal;
}
という感じ。
弱点
横並びにするときに、右側ピッタリにする必要がある場合は、面倒なのでfloatを使った方が楽かも。