ddの中にulを入れ子にすると上に余白が出来る

解決済

質問者：noname#131361
質問日時：2010/09/23 17:45
回答数：1件

ddの中にulを入れ子にすると上に余白が出来る

ddの中にリストを入れたいのですが、CSSでmarginやpaddingを「0」にしてもリストの上部に余白が出来てしまいます。
色々試してみたのですが、どうしても上の余白が消えません。
何処かタグがおかしいのでしょうか？　それともバグでしょうか？

*因みに、ulの上部marginにマイナスの数値を設定すると余白は消えるのですが・・・。

以下に、問題の個所を抜粋します。

－－－－－－－－－－－－－－－－－－－－－－－－
body {
margin: 0;
padding: 0;
}
html>/**/body {
font-family: "MS Pゴシック", "MS P Gothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku GothicPro", sans-serif;
}
#about {
margin: 0;
padding: 0;
width: 700px;
background-color: #33FFFF;
}
#about dl {
margin: 10px 0 0 60px;
padding: 0;
background-color:#99FFCC;
}
#about dl dt {
margin: 0;
padding: 0;
font-size: 12px;
background-color:#99FF00;
}
#about dl dd {
margin: 0 0 0 15px;
padding: 0;
background-color:#0066FF;
}
#about dl dd ul {
margin: 0;
padding: 0;
width: 500px;
list-style-position: inside;
}
#about dl dd li {
margin: 0;
padding: 0;
background-color:#CCFF99;
font-size: 11px;
}

－－－－－－－－－－－－－－－－－－－－－－－－
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional/EN"
"thhp://www.w3.org/TR/xhtml1/DTD/xhtml1-toransitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xhtlm="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>ulの上に余白が出来る</title>
</head>
<body>
<div id="about">
<dl>
<dt>動作確認</dt>
<dd> 　
<ul>
<li>解像度：1440×990</li>
<li>OS：Windows</li>
<li>ブラウザ：IE7、Opera9.8、Chrome6.0、Safari5.0</li>
<li>CSS及びJavascriptを使用しています。</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yuu_x
回答日時：2010/09/23 19:10

XML 宣言書くと IE 君は後方互換モードになるから、その辺の影響じゃないかな。

どの道 text/html で出力するんだから、何ちゃって XML なんかにせずに素直に HTML 4.01 か HTML 5 で書いたほうがいいですよ。

上から言われてるなら仕方ないけど、そうじゃないなら、変なところをまねしなくてもいい。

thhp（笑）
xhtlm="http://www.w3.org/1999/xhtml"（？）

あ～可能性として、全角スペースがまぎれてないか調べてみてください。
http://openlab.ring.gr.jp/k16/htmllint/htmllint. …

- 0
- 件

通報する

この回答へのお礼

早速の回答有難うございます。

今回、XHTMLで書いてるのは、上に言われているのではなくて、勉強を兼ねて個人サイトを書き直そうとしてました。その途中でIEだけでなく、OperaやSafariでも同じ状態になるので途方に暮れてた次第です。

ご意見を参考に調べてましたら、指摘の通り、<ul>の直前にスペースが紛れてました。
これを削除したら、意図した表示になりました。
（上部宣言のおかしかった箇所も修正しました。）

的確なご指摘、有難うございました。

通報する

お礼日時：2010/09/23 23:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！