paddingの見抜き方を教えて下さい

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <title>0からWEBサイトを作ってみよう</title>
7    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
8    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
9    <link rel="stylesheet" href="stylesheet.css">
10    <link rel="stylesheet" href="responsive.css">
11  </head>
12  <body>
13    <!-- Header -->
14    <header>
15      <div class="container">
16        <div class="header-title">
17          <a class="header-logo" href="#home">Progate School</a>
18        </div>
19        <div class="header-menu">
20          <!-- モバイル用のナビゲーション -->
21          <span class="fa fa-bars menu-icon"></span>
22          <!-- PC、タブレット用のナビゲーション -->
23          <ul class="header-menu-right">
24            <li>
25              <a href="#languages">学習言語</a>
26            </li>
27            <li>
28              <a href="#features">特徴</a>
29            </li>
30            <li>
31              <a href="#pricing">料金</a>
32            </li>
33            <li>
34              <a href="#columns">コラム</a>
35            </li>
36            <li>
37              <a href="#contact">お問い合わせ</a>
38            </li>
39          </ul>
40        </div>
41      </div>
42    </header>
43
44    <!-- Top content -->
45    <div id="home" class="top-section">
46      <div class="inner-bg">
47        <div class="container">
48          <div class="top-description">
49            <h2>プログラミングは人生を変える</h2>
50            <p>プログラミングを学んで、新しい自分を見つけよう。</p>
51          </div>
52          <div class="top-detail">
53            <a class="btn btn-top-white btn-lg" id="read-more">もっと詳しく</a>
54          </div>
55        </div>
56      </div>
57    </div>
58
59    <!-- Languages -->
60    <div id="languages" class="languages-section">
61      <div class="container">
62        <div class="section-title">
63          <h3>学習する言語</h3>
64        </div>
65        <div class="languages-box-wrapper">
66          <div class="languages-box">
67            <div class="icon">
68              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/html.png">
69            </div>
70            <h4>HTML & CSS</h4>
71            <p>Webページの<br>見た目をつくる言語</p>
72          </div>
73          <div class="languages-box">
74            <div class="icon">
75              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/jquery.png">
76            </div>
77            <h4>jQuery</h4>
78            <p>効果やアニメーションを実装できる<br>Javascriptライブラリ</p>
79          </div>
80          <div class="languages-box">
81            <div class="icon">
82              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/js.png">
83            </div>
84            <h4>Javascript</h4>
85            <p>動的なウェブサイト構築に用いる<br>プログラミング言語</p>
86          </div>
87          <div class="languages-box">
88            <div class="icon">
89              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/lang_icons/git.png">
90            </div>
91            <h4>Git</h4>
92            <p>ソースコードのバージョン管理、<br>共同開発を可能にするツール</p>
93          </div>
94        </div>
95      </div>
96    </div>
97
98    <!-- Features -->
99    <div id="features" class="features-section">
100      <div class="features-section-top gray-section">
101        <div class="container">
102          <div class="section-title">
103            <h3>特徴</h3>
104          </div>
105          <img class="features-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/mac_code.png">
106        </div>
107      </div>
108      <div class="features-section-bottom">
109        <div class="container">
110          <div class="features-box">
111            <h5>① ProgateでWEB開発の基礎知識を身につけよう</h5>
112            Progateで各コースをクリアして基礎知識を身につけましょう。それぞれ２周することによって知識を定着させます。
113          </div>
114          <div class="features-box">
115            <h5>② Progateの道場で知識を習得しよう</h5>
116            Progateのコースで基礎知識を身につけたら、実践的な演習をこなしていきましょう。また道場では更に発展的な学習もしていきます。
117          </div>
118          <div class="features-box">
119            <h5>③ 実際にプロダクトを作ってみよう</h5>
120            Progateで実践的な力を身につけたら自分で１つのプロダクトを作ってみましょう。自分で１から作ってみると、意外に理解できていないことに気づくと思います。
121            バグを修正しながらプロダクトを完成させることで、エンジニアとしての力を磨きましょう。
122          </div>
123          <div class="features-box">
124            <h5>④ エンジニアインターンを体験しよう</h5>
125            実際に培ったスキルをインターンを通じて仕事として使ってみましょう。会社のエンジニアとともに仕事をしていくことによって、さらなるスキルアップを目指せるはずです。
126          </div>
127        </div>
128      </div>
129    </div>
130
131    <!-- Message -->
132    <div class="message-section">
133      <div class="message-section-inner">
134        <div class="container">
135          <h4>プログラミングを学ぶのなら、生涯仕事に困らないことを私が保証しよう。
136            <br>- Facebook元役員
137          </h4>
138        </div>
139      </div>
140    </div>
141
142    <!-- Pricing -->
143    <div id="pricing" class="pricing-section gray-section">
144      <div class="container">
145        <div class="section-title">
146          <h3>コースを選ぶ</h3>
147        </div>
148        <div class="price-column">
149          <h2>短期集中2週間コース</h2>
150          <h3>3万円</h3>
151          <ul>
152            <li>期間 : 2週間</li>
153            <li>チャットでの質問 : ◯ </li>
154            <li>オフィスでの質問 : ◯ </li>
155          </ul>
156          <div class="btn btn-black">申し込む</div>
157        </div>
158        <div class="price-column price-column-green">
159          <h2>通常1ヶ月コース</h2>
160          <h3>5万円</h3>
161          <ul>
162            <li>期間 : 1ヶ月</li>
163            <li>チャットでの質問 : ◯ </li>
164            <li>オフィスでの質問 : ◯ </li>
165          </ul>
166          <div class="btn btn-black">申し込む</div>
167        </div>
168        <div class="price-column">
169          <h2>土日開発2ヶ月コース</h2>
170          <h3>8万円</h3>
171          <ul>
172            <li>期間 : 2ヶ月</li>
173            <li>チャットでの質問 : ◯ </li>
174            <li>オフィスでの質問 : ◯ </li>
175          </ul>
176          <div class="btn btn-black">申し込む</div>
177        </div>
178      </div>
179    </div>
180
181    <!-- Contact -->
182    <div id="contact" class="contact-section">
183      <div class="contact-section-inner">
184        <div class="container">
185          <div class="section-title">
186            <h3>お問い合わせ</h3>
187          </div>
188          <div class="contact-form">
189            <h4>メッセージを送る</h4>
190            <form>
191              <input type="text" name="email" placeholder="Email" class="contact-email">
192              <input type="text" name="subject" placeholder="Subject" class="contact-subject">
193              <textarea name="message" class="form-control" placeholder="Message"></textarea>
194              <button type="submit" class="btn btn-contact">Submit</button>
195            </form>
196          </div>
197          <div class="contact-about">
198            <h4>About Us</h4>
199            <p>プログラミングは世界を変える力です。
200                そしてあなたの人生を変える力です。
201                この信念は、私たち自身がプログラミングで人生を変えてきた原体験に基づいています。
202                この原体験をもとに、Progateは 「初心者から、創れる人を生み出す」 ことを理念としています。
203                プログラミングの最初のハードルを徹底的に低くし、世界一わかりやすく、楽しい学習環境を作ります。プログラミングを学びたい人の、せっかくの一歩を挫折で終わらせないために、私たちは全力で皆様に寄り添い、日本のプログラミング教育を変えていきます。
204                私たちと一緒にプログラミングを学んでみませんか？
205            </p>
206            <h4>Address</h4>
207            <p><i class="fa fa-map-marker"></i>東京都渋谷区神泉町20-24 Bricks 7F</p>
208            <p><i class="fa fa-phone"></i>Phone: 03-6455-0950</p>
209          </div>
210        </div>
211      </div>
212    </div>
213
214    <!-- Social -->
215    <div class="social-section">
216      <div class="container">
217        <div class="section-title">
218          <h3>Follow Us!</h3>
219        </div>
220        <div class="follow-us">
221          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
222            <i class="fa fa-facebook"></i>
223          </a>
224          <a href="https://twitter.com/prog_8" class="social-icon" target='_blank'>
225            <i class="fa fa-twitter"></i>
226          </a>
227        </div>
228      </div>
229    </div>
230    <footer>
231      <div class="container">
232        <div class="copyright">©2015-
233          Progate
234        </div>
235      </div>
236    </footer>
237  </body>
238</html>
239

上の.contact-formと.contact-aboutのpaddingは記述が無いので0だと思ったのですが0ではないのでしょうか？

どうやらpaddingが存在するようなんですが、どこから判別するのでしょうか？

ご教示ください

kei344

2017/09/27 07:10

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

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

回答2件

ベストアンサー

動くサンプル：https://jsfiddle.net/1fsj1j4s/

.containerにはpaddingが付いていますが、.contact-formには付いていませんよ。

見抜き方

デベロッパーツールを使ってください。

【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/09/26 10:20

kei344

総合スコア69407

tanakashouzoux

2017/09/27 06:53

初心者にも優しくご教示頂きありがとうございます<m(__)m>

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

cssは以下になります

css
1/*-------  ここから共通のCSS  --------*/
2* {
3  box-sizing: border-box;
4}
5
6html, body,
7ul, ol, li,
8h1, h2, h3, h4, h5, h6, p,
9form, input, div {
10  margin: 0;
11  padding: 0;
12}
13
14body {
15  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
16  font-weight: 400;
17  -webkit-font-smoothing: antialiased;
18  font-size: 14px;
19  color: #888;
20}
21
22li {
23  list-style: none;
24}
25
26a {
27  text-decoration: none;
28  color: #323a45;
29  transition: all .3s;
30}
31
32a:hover {
33  color: #0dc0c0;
34  text-decoration: none;
35}
36
37h2, h3, h4, h5, h6 {
38  margin-top: 10px;
39  margin-bottom: 10px;
40  font-weight: 400;
41}
42
43h4, h5 {
44  color: #444;
45  font-size: 18px;
46}
47
48.container {
49  max-width: 1170px;
50  width: 100%;
51  padding: 0 15px;
52  margin: 0 auto;
53}
54
55.section-title {
56  color: #555;
57  padding-top: 70px;
58  text-align: center;
59}
60
61.section-title h3 {
62  font-size: 32px;
63  font-weight: 300;
64}
65
66.gray-section {
67  background: #f4f4f4;
68}
69/*-------  ここまで共通のCSS  --------*/
70
71/*-------  ここからheader  --------*/
72header {
73  height: 50px;
74  position: fixed;
75  top: 0;
76  left: 0;
77  right: 0;
78  background-color: #fff;
79  line-height: 50px;
80  border-bottom: 1px solid #eee;
81  z-index: 10;
82}
83
84.header-title {
85  float: left;
86}
87
88.header-logo {
89  color: #777;
90  font-weight: 700;
91  font-size: 22px;
92  font-family: 'Dosis', sans-serif;
93}
94
95.header-menu-right {
96  float: right;
97}
98
99.header-menu-right li {
100  float: left;
101}
102
103.header-menu-right a {
104  font-weight: 700;
105  padding-left: 20px;
106}
107
108.header-menu-right a:hover {
109  color: #0dc0c0;
110  transition: color .3s;
111}
112/*-------  ここまでheader  --------*/
113
114/*-------  ここからtop content  --------*/
115.top-section {
116  margin: 0 auto;
117  text-align: center;
118  color: #fff;
119  background-image: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/top.jpg");
120  background-size: cover;
121}
122
123.inner-bg {
124  padding-top: 210px;
125  padding-bottom: 120px;
126  background-color: rgba(0, 0, 0, 0.6);
127}
128
129.top-description {
130  margin-bottom: 20px;
131}
132
133.top-description h2 {
134  font-size: 48px;
135  margin-bottom: 30px;
136  font-weight: 400;
137}
138
139.top-description p {
140  color: rgba(255, 255, 255, 0.8);
141  font-size: 18px;
142}
143
144.btn {
145  display: inline-block;
146  padding: 10px 20px;
147  margin: 20px;
148  font-weight: 600;
149  font-size: 18px;
150  cursor: pointer;
151  transition: all .3s;
152}
153
154.btn:hover {
155  color: #fff;
156}
157
158.btn-top-white {
159  background: rgba(250, 250, 250, 0.06);
160  border: 1px solid rgba(250, 250, 250, 0.15);
161  color: rgba(250, 250, 250, 0.9);
162}
163
164.btn-top-white:hover {
165  border: 1px solid rgba(250, 250, 250, 0.8);
166}
167/*-------  ここまでtop content  --------*/
168
169/*-------  ここからlanguages  --------*/
170.languages-section {
171  padding-bottom: 80px;
172  text-align: center;
173}
174
175.languages-box-wrapper {
176  width: 85%;
177  height: 500px;
178  margin: 0 auto;
179}
180
181.languages-box {
182  float: left;
183  vertical-align: top;
184  width: 50%;
185  padding-top: 40px;
186}
187
188.languages-box .icon {
189  margin-bottom: 20px;
190}
191/*-------  ここまでlanguages  --------*/
192
193/*-------  ここからfeatures  --------*/
194.features-section-top {
195  text-align: center;
196  clear: left;
197  height: 376px;
198}
199
200.features-section-bottom {
201  padding-top: 120px;
202}
203
204.features-box {
205  float: left;
206  vertical-align: top;
207  width: 50%;
208  padding: 0 30px;
209  margin-bottom: 60px;
210}
211/*-------  ここまでfeatures  --------*/
212
213/*-------  ここからmessage  --------*/
214.message-section {
215  clear: left;
216  color: white;
217  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/night_view.jpg");
218  background-size: cover;
219  text-align: center;
220}
221
222.message-section-inner {
223  background-color: rgba(0, 0, 0, 0.6);
224  padding: 140px 0;
225}
226
227.message-section h4 {
228  color: white;
229  font-size: 22px;
230  line-height: 40px;
231}
232/*-------  ここまでmessage  --------*/
233
234/*-------  ここからpricing  --------*/
235.pricing-section {
236  padding-bottom: 100px;
237  clear: left;
238}
239
240.price-column {
241  display: inline-block;
242  vertical-align: top;
243  width: 31%;
244  padding: 15px 15px 20px 15px;
245  margin-top: 20px;
246  margin-left: 1%;
247  margin-right: 1%;
248  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
249  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
250  background-color: #fff;
251  text-align: center;
252}
253
254.price-column h2 {
255  color: #fff;
256  font-size: 24px;
257  background: #323a45;
258  margin-top: 0;
259  margin-bottom: 0;
260  padding: 30px 0;
261}
262
263.price-column-green h2 {
264  background: #0dc0c0;
265}
266
267.price-column h3 {
268  color: #555;
269  background: #f0f0f0;
270  margin-bottom: 0;
271  margin-top: 0;
272  padding: 30px 0;
273  font-size: 28px;
274}
275
276.price-column ul {
277  padding: 20px 30px;
278}
279
280.price-column li {
281  font-size: 16px;
282  border-bottom: 1px solid #eee;
283  padding: 25px 0;
284}
285
286.btn-black {
287  background: #323a45;
288  color: #c9d1d6;
289}
290/*-------  ここまでpricing  --------*/
291
292/*-------  ここからcontact  --------*/
293.contact-section {
294  background: url("https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/backgrounds/contact.jpg");
295  background-size: cover;
296  color: white;
297}
298
299.contact-section-inner {
300  background-color: rgba(0, 0, 0, 0.6);
301  padding-bottom: 70px;
302}
303
304.contact-section h3, .contact-section h4 {
305  color: white;
306}
307
308.contact-section h4 {
309  font-size: 22px;
310  padding-bottom: 10px;
311}
312
313input[type="text"], textarea {
314  margin: 0;
315  padding: 0 10px;
316  vertical-align: middle;
317  background: rgba(250, 250, 250, 0.08);
318  border: none;
319  width: 85%;
320  color: white;
321  font-family: 'Open Sans', sans-serif;
322  font-size: 16px;
323  font-weight: 300;
324  border-radius: 0;
325  box-shadow: none;
326  transition: all .3s;
327  margin-bottom: 20px;
328  padding: 15px;
329}
330
331textarea {
332  height: 150px;
333}
334
335.contact-form {
336  display: inline-block;
337  vertical-align: top;
338  width: 58%;
339}
340
341.btn-contact {
342  font-family: 'Dosis', sans-serif;
343  font-size: 18px;
344  font-weight: 600;
345  background: #0dc0c0;
346  border: 1px solid #09b1b9;
347  color: white;
348  box-shadow: inset 0 1px 0 #0fc8c8;
349  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
350  transition: all .3s;
351  margin: 10px 0;
352  padding: 15px 35px;
353}
354
355.contact-about {
356  display: inline-block;
357  vertical-align: top;
358  width: 40%;
359}
360
361.contact-about i {
362  padding-right: 15px;
363  font-size: 18px;
364}
365
366.contact-about p {
367  margin: 0 0 24px;
368  line-height: 24px;
369}
370/*-------  ここまでcontact  --------*/
371
372/*-------  ここからsocial  --------*/
373.social-section {
374  text-align: center;
375  padding-bottom: 70px;
376}
377
378.social-icon {
379  text-align: center;
380  font-size: 36px;
381  padding: 5px;
382  transition: all .3s;
383}
384/*-------  ここまでsocial  --------*/
385
386/*-------  ここからfooter  --------*/
387footer {
388  text-align: center;
389  padding: 40px 0;
390  background: #222;
391}
392/*-------  ここまでfooter  --------*/
393