なぜpaddingになるかがわかりません。

前提・実現したいこと

HTML & CSS 道場コース中級編中級編を復習しよう 3.レッスン一覧部分を作ろうに取り組んでいます。仕様書に従って、下記の図の「さぁ、あなたもProgateでプログラミングを学んでみませんか?」の要素を80px分下げようとしたのですが、この高さを指定するのにmarginではなくpaddingを用いるのが分かりません。なぜそうするのかを教えていただけませんか。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8</head>
9<body>
10  <header>
11    <div class="container">
12      <div class="header-left">
13        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
14      </div>
15      <div class="header-right">
16        <a href="#" class="login">ログイン</a>
17      </div>
18    </div>
19  </header>
20  <div class="top-wrapper">
21    <div class="container">
22      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
23      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
24      <a href="#" class="btn signup">新規登録はこちら</a>
25      <p>or</p>
26      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
27      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
28    </div>
29  </div>
30  <div class="lesson-wrapper">
31    <div class="container">
32      <div class="heading">
33        <h2>Learn Where to Get Started!</h2>
34      </div>
35      <div class="lessons">
36        <div class="lesson">
37          <div class="lesson-icon">
38            <img src="https://prog-8.com/images/html/advanced/html.png">
39            <p>HTML & CSS</p>
40          </div>
41          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
42        </div>
43        <div class="lesson">
44          <div class="lesson-icon">
45            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
46            <p>jQuery</p>
47          </div>
48          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
49        </div>
50        <div class="lesson">
51          <div class="lesson-icon">
52            <img src="https://prog-8.com/images/html/advanced/ruby.png">
53            <p>Ruby</p>
54          </div>
55          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
56        </div>
57        <div class="lesson">
58          <div class="lesson-icon">
59            <img src="https://prog-8.com/images/html/advanced/php.png">
60            <p>PHP</p>
61          </div>
62          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
63        </div>
64      </div>
65    </div>
66  </div>
67  <div class="message-wrapper">
68    <div class="container">
69      <div class="heading">
70        <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
71        <h3>Let's learn to code, learn to be creative!</h3>
72      </div>
73      <span class="btn message">さっそく開発する</span>
74    </div>
75  </div>
76</body>
77</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからcssを書いていきましょう */
21.top-wrapper {
22  padding: 180px 0 100px 0;
23  background-image: url(https://prog-8.com/images/html/advanced/top.png);
24  background-size: cover;
25  color: white;
26  text-align: center;
27}
28
29.container {
30  width: 1170px;
31  margin: 0 auto;
32}
33
34.top-wrapper h1 {
35  opacity: 0.7;
36  font-size: 45px;
37  letter-spacing: 5px;
38}
39
40.top-wrapper p {
41  opacity: 0.7;
42  margin-bottom: 15px;
43}
44
45.signup {
46  background-color: #239b76;
47  margin-top: 15px;
48  margin-bottom: 15px;
49}
50
51.facebook {
52  background-color: #3b5998;
53  margin-right: 10px;
54}
55
56.twitter {
57  background-color: #55acee;
58}
59
60.btn {
61  padding: 8px 24px;
62  color: white;
63  display: inline-block;
64  opacity: 0.8;
65  border-radius: 4px;
66}
67
68.btn:hover {
69  opacity: 1;
70}
71
72.fa {
73  margin-right: 5px;
74}
75
76header {
77  height: 65px;
78  width: 100%;
79  background-color: rgba(34, 49, 52, 0.9);
80  position :fixed;
81  top: 0;
82  z-index: 10;
83}
84
85.logo {
86  width: 124px;
87  margin-top: 20px;
88}
89
90.header-left {
91  float: left;
92}
93
94.header-right {
95  float: right;
96  background-color: rgba(255, 255, 255, 0.3);
97  transition: all 0.5s;
98}
99
100.header-right:hover {
101  background-color: rgba(255, 255, 255, 0.5);
102}
103
104.header-right a {
105  line-height: 65px;
106  padding: 0 25px;
107  color: white;
108  display: block;
109}
110
111.lesson-wrapper {
112  height: 580px;
113  background-color: #f7f7f7;
114  text-align: center;
115}
116
117.heading {
118  padding-top: 80px;
119  padding-bottom: 50px;
120  color: #5f5d60;
121}
122
123.heading h2 {
124  font-weight: normal;
125}
126
127.lesson{
128  float: left;
129  width: 25%;
130}
131
132.lesson-icon {
133  position: relative;
134}
135
136.lesson-icon p {
137  position: absolute;
138  top: 44%;
139  width: 100%;
140  color: white;
141}
142
143.text-contents {
144  width: 80%;
145  display: inline-block;
146  margin-top: 15px;
147  font-size: 13px;
148  color: #b3aeb5;
149}
150
151.message-wrapper {
152  padding-bottom: 80px;
153  text-align: center;
154}
155
156.message {
157  padding: 15px 40px;
158  background-color: #5dca88;
159  cursor: pointer;
160  box-shadow: 0 7px #1a7940;
161}
162
163.message:active {
164  position: relative;
165  top: 7px;
166  box-shadow: none;
167}

試したこと

上のCSSコードの下にある
.message-wrapper{
padding-bottom: 80px;
・・・・・
}
の80pxの部分をmarginではなくpaddingにしているのがわかりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/11/03 08:14

結局のところProgateが作ったものなのでProgateに問い合わせないと本来の意図は分からないと思います。

sun-chan

2020/11/03 08:47

確かにProgateに問い合わせない限り、どうしてpaddingになるかの意図はずっと分からないですね。ご指摘の通りです。ご回答を他に頂いたところ、marginとpaddingの見た目に変化はないとの事でしたので、取り合えず今は割り切って進めていこうかと思います。

m.ts10806

2020/11/03 08:52

Progateしたことないですけど、あそこの課題って解答と全く同じでないとOKでないようですね。あまり「これが当然だ」と思ってやっていくと終わった後いざ自分でやろうとすると何もできないので（そういう質問者は多い）並行して、解答するのとは別で、自分の考えで同じレイアウトを再現するトレーニングもしていったほうが良いかと思います。

sun-chan

2020/11/06 06:15

返答が遅れてしまいすみませんでした。自分の力でレイアウトをイメージ通りに作れるよう、回答と全く同じにすることには拘らずやっていこうと思います。

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

回答1件

ベストアンサー

現状では、.message-wrapper に背景色や背景画像を設定していないので、marginでもpaddingでも見た目に変化はないのでお好みでいいと思います。

背景色や背景画像を設定するとmarginとpaddingでは見た目が異なってきますので、一度確認してみてください。この場合は、どのようなデザインにしたいかによって選択することになります。

投稿2020/11/03 05:48

hatena19

総合スコア34053

sun-chan

2020/11/03 08:41

ご回答してくださりありがとうございます。見た目はどちらも全く同じなので、それだったらmarginでもよいのではないかと思っていました。まだコースの途中ですので、とりあえずmarginで進めてみようと思います。

hatena19

2020/11/03 14:45

marginとpaddingの違いは領域の外側の余白か内側の余白かの違いです。とくに背景色や背景画像、borderを設定するときに見た目に違いがでてきます。今回はどれも設定していないので見た目に差はでませんが、将来、背景色や背景画像、borderを設定する必要がでたときにどちらがいいのか最初から考慮して選択するといいでしょう。

sun-chan

2020/11/06 06:18

返事が遅れてしまいすみませんでした。ご指摘を踏まえて、いずれどっちも使いこなせるようにしていこうと思います。

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