マージンの相殺

リンク内容
これは理解できます

ブロック要素でmarginが上下で重なるとき大きい方が反映されると習いましたが今回がぜんぜんわかりません。
親要素との間に何かあればいい？と親要素containerとpの関係について

p タグの親要素である container に対して padding-top を入れてあげればなぜ解決するのか？
よろしくお願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/normalize.css">
6  <link rel="stylesheet" href="css/styles.css">
7  <link rel="icon" href="favicon.ico">
8  <title>Dotinstall Pane</title>
9</head>
10<body>
11
12  <header>
13    <div class="container">
14      <p>
15        どっとインストールを見ながら<br>
16        コーディングができるAtomパッケージ
17      </p>
18      <h1>Dotinstall Pane</h1>
19      <a href="#">詳細を見る</a>
20
21    </div>
22
23  </header>
24
25</body>
26</html>

css
1@charset "utf-8";
2
3/*common*/
4
5body {
6margin: 0;
7font-size: 14px;
8font-family: Vernada, sans-serif;
9color: #333;
10}
11
12a {
13  text-decoration: none;
14}
15
16p {
17  line-height: 2;
18}
19
20
21/* header */
22
23header {
24  background: url('../img/bg.png');
25  background-size: cover;
26}
27
28header .container {
29  width: 820px;
30  margin: 0 auto;
31  height: 320px;
32  /*padding-top: 10px;*/
33}
34

css
1/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4   ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in
9 *    IE on Windows Phone and in iOS.
10 */
11
12html {
13  line-height: 1.15; /* 1 */
14  -ms-text-size-adjust: 100%; /* 2 */
15  -webkit-text-size-adjust: 100%; /* 2 */
16}
17
18/* Sections
19   ========================================================================== */
20
21/**
22 * Add the correct display in IE 9-.
23 */
24
25article,
26aside,
27footer,
28header,
29nav,
30section {
31  display: block;
32}
33
34/**
35 * Correct the font size and margin on `h1` elements within `section` and
36 * `article` contexts in Chrome, Firefox, and Safari.
37 */
38
39h1 {
40  font-size: 2em;
41  margin: 0.67em 0;
42}
43
44/* Grouping content
45   ========================================================================== */
46
47/**
48 * Add the correct display in IE 9-.
49 * 1. Add the correct display in IE.
50 */
51
52figcaption,
53figure,
54main { /* 1 */
55  display: block;
56}
57
58/**
59 * Add the correct margin in IE 8.
60 */
61
62figure {
63  margin: 1em 40px;
64}
65
66/**
67 * 1. Add the correct box sizing in Firefox.
68 * 2. Show the overflow in Edge and IE.
69 */
70
71hr {
72  box-sizing: content-box; /* 1 */
73  height: 0; /* 1 */
74  overflow: visible; /* 2 */
75}
76
77/**
78 * 1. Correct the inheritance and scaling of font size in all browsers.
79 * 2. Correct the odd `em` font sizing in all browsers.
80 */
81
82pre {
83  font-family: monospace, monospace; /* 1 */
84  font-size: 1em; /* 2 */
85}
86
87/* Text-level semantics
88   ========================================================================== */
89
90/**
91 * 1. Remove the gray background on active links in IE 10.
92 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
93 */
94
95a {
96  background-color: transparent; /* 1 */
97  -webkit-text-decoration-skip: objects; /* 2 */
98}
99
100/**
101 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
102 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
103 */
104
105abbr[title] {
106  border-bottom: none; /* 1 */
107  text-decoration: underline; /* 2 */
108  text-decoration: underline dotted; /* 2 */
109}
110
111/**
112 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
113 */
114
115b,
116strong {
117  font-weight: inherit;
118}
119
120/**
121 * Add the correct font weight in Chrome, Edge, and Safari.
122 */
123
124b,
125strong {
126  font-weight: bolder;
127}
128
129/**
130 * 1. Correct the inheritance and scaling of font size in all browsers.
131 * 2. Correct the odd `em` font sizing in all browsers.
132 */
133
134code,
135kbd,
136samp {
137  font-family: monospace, monospace; /* 1 */
138  font-size: 1em; /* 2 */
139}
140
141/**
142 * Add the correct font style in Android 4.3-.
143 */
144
145dfn {
146  font-style: italic;
147}
148
149/**
150 * Add the correct background and color in IE 9-.
151 */
152
153mark {
154  background-color: #ff0;
155  color: #000;
156}
157
158/**
159 * Add the correct font size in all browsers.
160 */
161
162small {
163  font-size: 80%;
164}
165
166/**
167 * Prevent `sub` and `sup` elements from affecting the line height in
168 * all browsers.
169 */
170
171sub,
172sup {
173  font-size: 75%;
174  line-height: 0;
175  position: relative;
176  vertical-align: baseline;
177}
178
179sub {
180  bottom: -0.25em;
181}
182
183sup {
184  top: -0.5em;
185}
186
187/* Embedded content
188   ========================================================================== */
189
190/**
191 * Add the correct display in IE 9-.
192 */
193
194audio,
195video {
196  display: inline-block;
197}
198
199/**
200 * Add the correct display in iOS 4-7.
201 */
202
203audio:not([controls]) {
204  display: none;
205  height: 0;
206}
207
208/**
209 * Remove the border on images inside links in IE 10-.
210 */
211
212img {
213  border-style: none;
214}
215
216/**
217 * Hide the overflow in IE.
218 */
219
220svg:not(:root) {
221  overflow: hidden;
222}
223
224/* Forms
225   ========================================================================== */
226
227/**
228 * Remove the margin in Firefox and Safari.
229 */
230
231button,
232input,
233optgroup,
234select,
235textarea {
236  margin: 0;
237}
238
239/**
240 * Show the overflow in IE.
241 * 1. Show the overflow in Edge.
242 */
243
244button,
245input { /* 1 */
246  overflow: visible;
247}
248
249/**
250 * Remove the inheritance of text transform in Edge, Firefox, and IE.
251 * 1. Remove the inheritance of text transform in Firefox.
252 */
253
254button,
255select { /* 1 */
256  text-transform: none;
257}
258
259/**
260 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
261 *    controls in Android 4.
262 * 2. Correct the inability to style clickable types in iOS and Safari.
263 */
264
265button,
266html [type="button"], /* 1 */
267[type="reset"],
268[type="submit"] {
269  -webkit-appearance: button; /* 2 */
270}
271
272/**
273 * Remove the inner border and padding in Firefox.
274 */
275
276button::-moz-focus-inner,
277[type="button"]::-moz-focus-inner,
278[type="reset"]::-moz-focus-inner,
279[type="submit"]::-moz-focus-inner {
280  border-style: none;
281  padding: 0;
282}
283
284/**
285 * Restore the focus styles unset by the previous rule.
286 */
287
288button:-moz-focusring,
289[type="button"]:-moz-focusring,
290[type="reset"]:-moz-focusring,
291[type="submit"]:-moz-focusring {
292  outline: 1px dotted ButtonText;
293}
294
295/**
296 * 1. Correct the text wrapping in Edge and IE.
297 * 2. Correct the color inheritance from `fieldset` elements in IE.
298 * 3. Remove the padding so developers are not caught out when they zero out
299 *    `fieldset` elements in all browsers.
300 */
301
302legend {
303  box-sizing: border-box; /* 1 */
304  color: inherit; /* 2 */
305  display: table; /* 1 */
306  max-width: 100%; /* 1 */
307  padding: 0; /* 3 */
308  white-space: normal; /* 1 */
309}
310
311/**
312 * 1. Add the correct display in IE 9-.
313 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
314 */
315
316progress {
317  display: inline-block; /* 1 */
318  vertical-align: baseline; /* 2 */
319}
320
321/**
322 * Remove the default vertical scrollbar in IE.
323 */
324
325textarea {
326  overflow: auto;
327}
328
329/**
330 * 1. Add the correct box sizing in IE 10-.
331 * 2. Remove the padding in IE 10-.
332 */
333
334[type="checkbox"],
335[type="radio"] {
336  box-sizing: border-box; /* 1 */
337  padding: 0; /* 2 */
338}
339
340/**
341 * Correct the cursor style of increment and decrement buttons in Chrome.
342 */
343
344[type="number"]::-webkit-inner-spin-button,
345[type="number"]::-webkit-outer-spin-button {
346  height: auto;
347}
348
349/**
350 * 1. Correct the odd appearance in Chrome and Safari.
351 * 2. Correct the outline style in Safari.
352 */
353
354[type="search"] {
355  -webkit-appearance: textfield; /* 1 */
356  outline-offset: -2px; /* 2 */
357}
358
359/**
360 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
361 */
362
363[type="search"]::-webkit-search-cancel-button,
364[type="search"]::-webkit-search-decoration {
365  -webkit-appearance: none;
366}
367
368/**
369 * 1. Correct the inability to style clickable types in iOS and Safari.
370 * 2. Change font properties to `inherit` in Safari.
371 */
372
373::-webkit-file-upload-button {
374  -webkit-appearance: button; /* 1 */
375  font: inherit; /* 2 */
376}
377
378/* Interactive
379   ========================================================================== */
380
381/*
382 * Add the correct display in IE 9-.
383 * 1. Add the correct display in Edge, IE, and Firefox.
384 */
385
386details, /* 1 */
387menu {
388  display: block;
389}
390
391/*
392 * Add the correct display in all browsers.
393 */
394
395summary {
396  display: list-item;
397}
398
399/* Scripting
400   ========================================================================== */
401
402/**
403 * Add the correct display in IE 9-.
404 */
405
406canvas {
407  display: inline-block;
408}
409
410/**
411 * Add the correct display in IE.
412 */
413
414template {
415  display: none;
416}
417
418/* Hidden
419   ========================================================================== */
420
421/**
422 * Add the correct display in IE 10-.
423 */
424
425[hidden] {
426  display: none;
427}
428

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

回答1件

ちょっと日本語が不自由なので意味が分かっていませんが、
paddingは内側のマージンなので、確実に効きます。
ここらへんをよく読んでご理解ください。「ボックスモデル」で検索

わたくしの場合、ほとんどの局面で、paddingを選択します。
上下の兼ね合いとか考えないで良いので。
marginを使うのは、そうしなければならない時くらいで、
例えば、h2などにborder-bottomとかbackgroud-imageを指定する場合、
要するに、その要素最下部まで背景・罫線がある場合は、絶対にpaddingでは指定できないので、
という感じです。
まぁその場合でも、次の要素にpadding-topを入れちゃえば、必要ないので、
そちらの対応が多いかなと思います。

追記：
もしかして、最上部で隣接する要素が無い場合のこと？
解釈としては、一番最初の要素にmargin-topを指定する→効かない。
ってのは、おそらくその前に高さが確定したものがないからだと思います。
ブラウザの気持ち：
その前の要素からmargin-topっていうけど、要素が無いから高さが無いじゃん。
んじゃ、マージンくれてやらないよ。ってことかと。

こちらの「テキストとか挟まってると、大丈夫。」ってところで
示されている通り、テキストで高さが確定するから、marginでも効くんだと思います。

投稿2017/04/16 16:10

編集2017/04/16 16:39