画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。 長年(過去2回ですが)苦しんできたこの現象の原因と回避法が分かりました。のでメモ。 HTMLバージョンXHTMLTransitional、XML宣言あり。 タグの状況liタグの中にaタグを入れその中にimgタグを入れている。 CSSの状況ul、li、img共にマージンはゼロ。list-styleはnoneに。 表示: marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。 1.プレーンな状態。 CSSに何も指定していない状態。 ちなみにOperaはこの状態でもマージンがないです。 2.CSSで、ul、li、a、imgタグのmarginを0に。 margin: 0;の指定があるにもかかわらず、変な余白が。 3.imgにdisplay: block;を指定