ホームページ >ウェブフロントエンド >htmlチュートリアル >div ネストの問題_html/css_WEB-ITnose
div ネストの問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:08:151104ブラウズ
次のようにネストされた形式を作成しました。
243a8f3f087936dc3f96e2f0cf018c22
16b28748ea4df4d9c2150843fecfba68 /body>
CSS は次のとおりです:
#main { margin:0px;height:1000px;width:170px;background-image:url(../images/menu_bg.jpg);}
#menu { margin :0px;問題は、メニュー ブロックがネストされていない前は、最も外側のメイン ブロックの背景の上端と左端が隙間なくブラウザの端に近いのですが、それをネストされたメニューの後に追加すると、ブロック、外側のメインブロックの左の境界線は問題ありませんが、上の境界線が下に移動しており、CSSに margin-top:0px を追加しようとしましたが、まだありません。この現象の原因は何でしょうか?
オンラインで専門家に質問してください。ありがとうございます!
ディスカッションへの返信 (解決策)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style>body { margin:0; padding:0}#main { margin:0px; height:1000px; width:170px; background:red;}#menu { margin:0px; background:blue;}</style><body><div id="main"> <div id="menu">目录</div></div></body></html> #menu で設定したマージンは、論理的には 10 ピクセルである必要があります。 , 外側のメインブロックは動かないはずなのに、メニューブロックは10px下に移動するのですが、なぜ設定後に外側のブロックが10px下に移動するのですか?
paddingの設定で十分であることが分かりました。 、しかし、私はまだ混乱しています、なぜ内側の div ブロックのマージン属性を設定すると外側のブロックがそれに応じて移動するのでしょうか。
http://leepiao.blog.163.com/blog/static/485031302010427113653/
この投稿は確かに正しいです、ありがとうございます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。