質問編集履歴
3
属性の閉じ忘れ修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
<div class="midashi_bg10">
|
|
18
18
|
|
|
19
|
-
<div class="container2 align="center">
|
|
19
|
+
<div class="container2" align="center">
|
|
20
20
|
|
|
21
21
|
<div class="row row-div_width">
|
|
22
22
|
|
2
css追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
質問タイトルが分かりにくくて恐縮ですが、「
|
|
9
|
+
質問タイトルが分かりにくくて恐縮ですが、「子要素のmargin指定で親要素にも影響を与えてしまう理由」について教えていただけますと幸いです。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -98,7 +98,9 @@
|
|
|
98
98
|
|
|
99
99
|
ーーーーーーーーーーーーーーーー
|
|
100
100
|
|
|
101
|
+
1つ目の質問は、
|
|
102
|
+
|
|
101
|
-
|
|
103
|
+
<div class="midashi_bg10">の子要素「<div class="container2 align="center">」にmargin-top:100px;をかけると、子要素だけではなく、親要素（div class="midashi_bg10">）もmargin-top:100px;分の余白ができるのはなぜでしょうか？
|
|
102
104
|
|
|
103
105
|
```css
|
|
104
106
|
|
|
@@ -134,6 +136,18 @@
|
|
|
134
136
|
|
|
135
137
|
<div class="div_width">だけmargin-top:100px;が効くのはなぜでしょうか？
|
|
136
138
|
|
|
139
|
+
```css
|
|
140
|
+
|
|
141
|
+
.div_width{
|
|
142
|
+
|
|
143
|
+
width: 315px;
|
|
144
|
+
|
|
145
|
+
margin-top: 100px;
|
|
146
|
+
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
137
151
|
ーーーーーブラウザ上ーーーーーーーーーーー
|
|
138
152
|
|
|
139
153
|
|
1
コードブロック記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
例えば以下のコードを例にご質問させていただきます。
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
```HTML
|
|
16
16
|
|
|
17
17
|
<div class="midashi_bg10">
|
|
18
18
|
|
|
@@ -48,7 +48,9 @@
|
|
|
48
48
|
|
|
49
49
|
</div>
|
|
50
50
|
|
|
51
|
+
```
|
|
52
|
+
|
|
51
|
-
|
|
53
|
+
```css
|
|
52
54
|
|
|
53
55
|
.midashi_bg10{
|
|
54
56
|
|
|
@@ -88,6 +90,8 @@
|
|
|
88
90
|
|
|
89
91
|
}
|
|
90
92
|
|
|
93
|
+
```
|
|
94
|
+
|
|
91
95
|
ーーーーーブラウザ上ーーーーーーーーーーー
|
|
92
96
|
|
|
93
97
|
|
|
@@ -96,7 +100,7 @@
|
|
|
96
100
|
|
|
97
101
|
1つ目の質問は、<div class="midashi_bg10">の子要素「<div class="container2 align="center">」にmargin-top:100px;をかけると、子要素だけではなく、親要素（div class="midashi_bg10">）もmargin-top:100px;分の余白ができるのでしょうか？
|
|
98
102
|
|
|
99
|
-
|
|
103
|
+
```css
|
|
100
104
|
|
|
101
105
|
.container2{
|
|
102
106
|
|
|
@@ -105,6 +109,8 @@
|
|
|
105
109
|
margin-top: 100px;
|
|
106
110
|
|
|
107
111
|
}
|
|
112
|
+
|
|
113
|
+
```
|
|
108
114
|
|
|
109
115
|
ーーーーーブラウザ上ーーーーーーーーーーー
|
|
110
116
|
|
|
@@ -118,7 +124,15 @@
|
|
|
118
124
|
|
|
119
125
|
ーーーーーーーーーーーーーーーー
|
|
120
126
|
|
|
121
|
-
2つ目の質問は、
|
|
127
|
+
2つ目の質問は、
|
|
128
|
+
|
|
129
|
+
<div class="div_width">にmargin-top:100px;をかけると、
|
|
130
|
+
|
|
131
|
+
親要素<div class="midashi_bg10">や<div class="container2 align="center">、
|
|
132
|
+
|
|
133
|
+
<div class="row row-div_width">は余白ができず、
|
|
134
|
+
|
|
135
|
+
<div class="div_width">だけmargin-top:100px;が効くのはなぜでしょうか？
|
|
122
136
|
|
|
123
137
|
ーーーーーブラウザ上ーーーーーーーーーーー
|
|
124
138
|
|