ddの中にulを入れ子にすると上に余白が出来る
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>
お礼
ありがとうございました