CSS:一部marginが適用されない。

問題内容

Progate　中級　道場コース１についてです。
HTMLでボタン（クラス名　sign-up,facebook,twitter）の３つ作成し、CSSでmarginを当てたところ、
クラスsign-upの上下にmarginが適用されません。
適応する方法と何が問題だったかご教示いただきたいです。
よろしくお願い致します。
※質問内容に不備がありましたら修正させていただきます。

ソースコード

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  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <div class="top-wrapper">
13    <div class="container">
14      <h1>LEARN TO CODE.<br>
15      LEARN TO BE CREATIVE.</h1>
16      <p>Progateはオンラインプログラミング学習サービスです。<br>
17      初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
18      <a href="#" class="btn sign-up">新規登録はこちら</a>
19      <p>or</p>
20      <a href="#" class="btn facebook">Facebookで登録</a>
21      <a href="#" class="btn twitter">Twitterで登録</a>
22    </div>
23  </div>
24  
25</body>
26</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.top-wrapper {
23  background-image:url(https://prog-8.com/images/html/advanced/top.png);
24  background-size:cover;
25  height:350px;
26  width:100%;
27  padding:180px 0 100px 0;
28  text-align:center;
29  color:white;
30}
31.container {
32  width:1170px;
33  margin:0 auto;
34  overflow:hidden;
35}
36.top-wrapper h1 {
37  font-size:45px;
38  letter-spacing:5px;
39  opacity:0.7;
40}
41.top-wrapper p {
42  opacity:0.7;
43  margin-bottom:15px;
44}
45.btn {
46  padding:8px 24px;
47  color:white;
48  opacity:0.8;
49}
50.sign-up {
51  background-color:#239b76;
52 　margin-top:15px;
53  margin-bottom:15px;
54}
55.facebook {
56  background-color:#3b5998;
57  margin-right:10px;
58}
59.twitter {
60  background-color:#55acee;
61}

現状

完成図

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

回答3件

btnクラスにdisplay: inline-block;を追加。

投稿2020/11/21 06:47

Daregada

総合スコア11990

noko0505

2020/11/21 07:10

端的でわかりやすい回答をありがとうございます。 display: inline-blockにすることで解決できました。今後ともご指導ご鞭撻のほどよろしくお願い致します。

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

こんにちは。

インラインであることが原因です。

インライン整形コンテキストは、他の整形コンテキストの中に存在する、段落のコンテキストと考えることができます。段落は、テキスト上で <strong>, <a>, <span> などの要素が使われた場合のようなインライン整形コンテキストを作成します。

ボックスモデルは、インライン整形コンテキストに参加している項目には完全には適用されません。横書きモードの行では、水平方向のパディング、境界、マージンが要素に適用され、テキストを左右に押しのけます。ただし、要素の上下のマージンは適用されません。水平のパディングや境界は適用されますが、インライン整形コンテキストでは、ラインボックスがパディングや境界によって押し広げられることはないため、上下の内容が重なる可能性があります。
インライン整形コンテキスト | 整形コンテキストの紹介 - CSS: カスケーディングスタイルシート | MDN

解決方法ですが、手っ取り早いのはdisplay: inline-blockなどとして、ブロックレイアウトにしてしまうことです。

投稿2020/11/21 06:43

Lhankor_Mhy

総合スコア36115

noko0505

2020/11/21 07:09

ご回答ありがとうございます。 display: inline-blockにすることで無事解決できました。ご丁寧にリンクまで貼っていただいて、ありがとうございます。教えていただいた記事を読んで理解を深めたいと思います。今後ともご指導ご鞭撻のほどよろしくお願いいたします。

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

ベストアンサー

問題は2点。

.sign-upの下記に
margin-top:15px;
全角空白が紛れてます。
それを半角空白に修正。
margin-top:15px;

a要素はインライン要素ですのでそもそも上下マージンは効きません。
下記のようにインラインブロック要素に変換すると効くようになります。

css
1.btn {
2  padding:8px 24px;
3  color:white;
4  opacity:0.8;
5  display: inline-block; /* 追加 */
6}
7.sign-up {
8  background-color:#239b76;
9  margin-top:15px;
10  margin-bottom:15px;
11}