ログイン
質問する
Gizport
Solid 111の使い方、故障・トラブル対処法
1 回答
0
Share (facebook)
210
view
全般

cssわかりません。教えてください。 以下の記述なんですが、 #t...

cssわかりません。教えてください。 以下の記述なんですが、

#test{

で、パディングとかマージンを０（ゼロ）にしても、左や上に余白ができますが、なぜなのかわかりません。

ちなみに、下記の記述のとおり、

#test ul{

で、パディングとマージンを設定すると、余白がなくなります。

<div id="test">

</div>

で囲まれている#testで設定すればいいように思うのですが、できないのはなぜなんでしょう。ご教授願います。


htmlの内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.9.0 for Windows">
<title></title>
<link rel="stylesheet" href="base.css" type="text/css">
</head>
<body>
<div id="test">
<ul>
<li><a href="#">111</a>
<li><a href="#">222</a>
<li><a href="#">333</a>
</ul>
</div>
</body>
</html>


base.cssの内容

body{
width : 600px;
border-width : 1px;
border-style : solid;
border-color : gray;
margin-left : auto;
margin-right : auto;
}
#test{
font-size : x-large;
}
#test li{
list-style-type : none;
}
#test ul{
padding-left : 0px;
margin-left : 0px;
padding-top : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
}
Yahoo!知恵袋 4569日前
コメントする
お気に入り
1
質問者が選んだベストソリューション
ulのデフォルトのスタイルが原因です。
#test自体は関係ありません。#testが40pxずれているのではなく、#testの中のulがずれているんです。
ulはpadding-left:40px(ブラウザによってはmargin)がデフォルトで設定されているのでそれをリセットしないといけません。

#test ul{
margin:0;
padding-left:0;
}

とすればulの余白(左側と上)は無くなります。

参考：
UIのデフォルトスタイルシートの初期化方法 の ulの部分
http://www.coolwebwindow.com/csstips/cssbasic/000181.php



このようなずれ（デフォルトの余白、サイズ）は他の要素でもあるのでCSSを自分で設定するときは
*{margin:0;padding:0;}
(*は全称セレクタといってすべての要素に適用するものです。)
をCSSの先頭に書いたり、

CSSブラウザのスタイルをリセットするスタイルシート集 コリス
http://coliss.com/articles/build-websites/operation/css/1799.html

などで紹介されているreset.cssを<link>で読み込んでから自分のCSSを書くようにするといいです。
Yahoo!知恵袋 4569日前
シェア
　
コメントする
　

参考になったと評価
　　このQ&Aは参考になりましたか？

Share (facebook)
その他の解決方法を知っていますか？
回答する
全般
67
Views
css教えてください。 111222333をセンタリングしたいのです...
質問者が納得>tokoro_joji_san_san_sanさん ＞111222333をセンタリングしたいのですができません。どこに問題があるのですか divとliにborderを付けてみれば分かります。 floatは左寄せする指定なので、これの指定された要素を中央寄せはできません。 中央寄せしているように見せるにはこのfloatをつけた要素を入れたboxを中央寄せします。 中央寄せされた800pxのdiv中でliは左寄せされているはずですがどうですか。 liを中央寄せしているように見せるには、divの横...
4569日前view67
全般
72
Views
cssわかりません。教えてください。 以下の記述なんですが、 #t...
質問者が納得ulのデフォルトのスタイルが原因です。 #test自体は関係ありません。#testが40pxずれているのではなく、#testの中のulがずれているんです。 ulはpadding-left:40px(ブラウザによってはmargin)がデフォルトで設定されているのでそれをリセットしないといけません。 #test ul{ margin:0; padding-left:0; } とすればulの余白(左側と上)は無くなります。 参考： UIのデフォルトスタイルシートの初期化方法 の ulの部分 http://w...
4569日前view72