marginが違うクラスに影響してしまいます。

main・container・contentsにmarginを指定しましたが、

containerのmargin-topがmainに適用されてしまします。

paddingはconteinerに適用されます。

初歩的な事で申し訳ありませんが、お力添えお願いします。。。

HTML
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4	<meta charset="UTF-8">
5	<link rel="stylesheet" href="test.css">
6	<title>test</title>
7</head>
8<body>
9	<header></header>
10
11	<main>
12		<div class="container"></div>
13		<div class="contents"></div>
14	</main>
15	
16</body>
17</html>

css
1@charset "UTF-8";
2
3body{
4    margin: 0;
5}
6
7main{
8    width: 500px;
9    height: 1000px;
10    background-color: rgb(180, 102, 102);
11}
12
13.container{
14    margin: 200px 0 0 100px;
15    width: 350px;
16    height: 500px;
17    background-color: rgb(68, 68, 129);
18}
19
20.contents{
21    margin: 100px 0 0 50px;
22    width: 200px;
23    height: 350px;
24    background-color: coral;
25}

行動規範の内容に同意します

回答1件

ベストアンサー

マージンの相殺ですね。

マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

親と子孫を隔てるコンテンツがない場合

あるブロックの margin-top と、1つ以上の子孫ブロックの margin-top を隔てる境界、パディング、インライン部分、ブロック整形コンテキストの生成、浮動の解除 (clear) のいずれもがない場合、もしくは、あるブロックの margin-bottom と1つ以上の子孫ブロックの margin-bottom を隔て境界、パディング、インラインコンテンツ、 height, min-height, max-height のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。

mainに枠線(透明色でも可)を付けるとマージンの相殺が起こらなくなるので、質問者の想定しているデザインになるかと思います。

投稿2021/03/02 17:37

編集2021/03/02 17:43