ul、dlタグでリストを作成すると行間に余白が

締切済

質問者：colton_s
質問日時：2008/06/11 01:03
回答数：5件

とても基本的な質問なのですが、どなたか教えて頂けると助かります。

ul、dlタグを使い、画像を縦に並べようとしているのですが、IEではどうしても画像と画像の間に余白が入ってしまいます。
この余白を消したいのですが、どうすれば宜しいでしょうか？

■htmlの記述
<ul>
<li>画像１</li>
<li>画像２</li>
<li>画像３</li>
</ul>

<dl>
<dt>画像1-1</dt>
<dd>画像1-2</dd>
<dt>画像2-1</dt>
<dd>画像2-2</dd>
<dt>画像3-1</dt>
<dd>画像3-2</dd>
</dl>

■CSSの記述
#ul{
margin:0;
padding:0;
line-height:0;
list-style:none;
}

#ul li{
margin:0;
padding:0;
line-height:0;
}

#dl{
margin:0;
padding:0;
line-height:0;
list-style:none;
}

アドバイスをどうぞ宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： harawo
回答日時：2008/06/11 17:22

解決策はすでに出ているようですから、よりよい対応として……という話をします。

UL、DL要素（タグ）は、箇条書きという、かなり限定的に使用されるもので、写真を並べて表示する用途とは関係ありませんし、ウェブブラウザによって、属性のばらつきが出てしまいやすいものでもあります。
こういうケースでは、ブロック要素であるという属性以外、なにも属性が定義されていないDIV要素（タグ）を使うのが、オーソドックスな手法といえます。

#indent {margin-left: 120px;}
このように、左側に余白を作るスタイルシートを作り、
<div id="indent"><img src="picture.jpg"></div>
として、DIV要素にスタイルシートを適用します。