HTMLでタグを改行区切りで記述した時に入る空白の対策メモ。

こうした時の

<img src="img/user_black_female.png" /> <img src="img/user_business.png" /> <img src="img/user_business_boss.png" /> <img src="img/user_female.png" />

この隙間の事。


普通形

コードの汚さを我慢すればこれが一番楽。 <img src="img/user_black_female.png" /><img src="img/user_business.png" /><img src="img/user_business_boss.png" /><img src="img/user_female.png" />


letter-spacing:-n;

CSSの letter-spacing をマイナスにして調整する。
元ネタ：http://inspire-tech.jp/2011/06/inline_block_spaces/ <span style="letter-spacing: -0.40em;"> <img src="img/user_black_female.png" /> <img src="img/user_business.png" /> <img src="img/user_business_boss.png" /> <img src="img/user_female.png" /> </span>

幅指定がフォント依存なので厳密なケースでは使えない。


JavaScript

JavaScriptでテキストノードを削除する。 $("#xxxx").contents().each(function(){ if (this.nodeType==3) this.parentNode.removeChild(this); });

JavaScriptが使える場合のみ。


display:table-cell;

teble-cell で出来るとの情報が有ったので試してみる。
元ネタ：http://h2ham.seesaa.net/article/117579108.html img { display: table-cell; }

ブラウザ依存。Chromeはアウト。IEもIE7以前は teble-cell 未対応のはず。

IE8:

Firefox:

Chrome:

結論

現状、CSSだけでうまいことやる方法は無さげ。
いままで通りか、JavaScript でやるしか無さそう。