ボタンの下に余白を表示したい

Question

前提・実現したいこと

PROGATE道場編中級のトップ部分を作っています。
新規登録はこちら　のボタンに、margin:15px 0;を当てているのですが、実際には反映されません。

<p>タグや、他のボタンには、指定したｃｓｓが当たっています。

発生している問題・エラーメッセージ

![新規登録ボタンの下に余白が生まれない](ed36c61e650c1b9267f36537a8045399.jpeg)

該当のソースコード

 <a href="#" class="btn registration">新規登録はこちら</a>
 <p >or</p>

 .page-header p {
  opacity:0.7;
  margin-bottom:15px;
}
.registration {
  background-color:#239b76;
  margin-top:15px;
  margin-bottom:15px;
}
.btn {
  padding :8px 24px;
  color:#fff;
  border-radius:4px;
}

試したこと

ページの検証で、確かめると、新規登録ボタンには、margin-bottom:15px;が当たっているように表示される（チェックマークが入っている）。チェックマークを外してみても、表示状況は変わらない。

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

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

Answer 1

インライン要素には上下マージンは効きません。
下記のようにインラインブロックに変換してください。

.registration {
  background-color:#239b76;
  margin-top:15px;
  margin-bottom:15px;
  display: inline-block; /* 追加 */
}

margin - CSS: カスケーディングスタイルシート | MDN

Comments

[lilychaco]

回答をありがとうございました。できました。
inline要素には、マージンは効かない。
inline要素には、何があるか、復習します。
ありがとうございました。