コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > div ネストの問題_html/css_WEB-ITnose

div ネストの問題_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:08:15
オリジナル
1111 人が閲覧しました

次のようにネストされた形式を作成しました。


/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/

この投稿は確かに正しいです、ありがとうございます

関連ラベル：
div嵌套问题
ソース：php.cn
前の記事：2 つの連続する div のマージン 20 が 40 に表示されないのはなぜですか? _html/css_WEB-ITnose 次の記事：WebBrowser を使用した print_html/css_WEB-ITnose について質問する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ルート ノードのリスト項目シンボル (<ul> および <ol>) は CSS で表示および削除できず、overflow-x: hidden の問題は解決できません。 現在、Web ページの作成に取り組んでいますが、リスト項目に問題があります。通常、各リスト項目の横に表示されるドットと数字は表示されません。また、CSS プロパティの overfl...
から 2024-04-04 16:38:22
0
1
3617
ネストされたエコーを持つ div 内のエコー echo<?phprequire'connect.php';$query=mysqli_query($conn,"SELECT*FROM`videos`"...
から 2024-04-04 11:09:23
0
1
390
グリッドテンプレートの列が行上の項目を整列させない 私は HTML と CSS の初心者で、grid-template-column を使用してナビゲーション バーを作成しようとしています。私のアイデアは、ナビゲーション バーをロゴ...
から 2024-04-03 16:58:18
0
1
370
マウスオーバーイベントを使用してフライアウトメニューを表示する ポップアップ メニューがあり、マウスオーバー イベントを使用して切り替えようとしていますが、期待どおりに動作していないようです。 div を .hero-list-blocka:h...
から 2024-04-03 15:14:43
0
1
416
サイドバーが開いたときに div が左に押されるように、サイドバーの隣に div を配置する方法 サイドバーを開くと、メインコンテンツの div が右に寄せられるのではなくサイドバーの下に配置され、表示されるときの div の px はサイドバーの幅と等しくなるはずです。 cs...
から 2024-04-03 14:47:21
0
1
325
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート