「困ったこと」btn-wrapper（親要素）からbtn（子要素）の上下marginがはみ出てしまう。

Question

Progateで中級の道場で「新規登録はこちら」のボタンの上つまり、btn-wrapperのmargin-topを30pxにしたいのに、ボタンの上下paddingがbtn-wrapperからはみ出てしまいます。paddingが親要素からはみ出ないようにするにはどうしたらよいですか？

Answer 1

display: block;、display: inline-block;あたりを指定してみるといかがでしょうか?

おそらくそのままだと横幅いっぱいの表示になってしまったり左寄せになってしまったりすると思いますが、
その前提で再度ボタンの横幅調整や中央配置などを進めてください。

---

line-heightを指定する方法もあるかもしれませんが、
レスポンシブ時に毎回line-heightも変更する必要が生じるので、私はおすすめしません。

Comments

[akiiii]

<a>要素にdisplay:inline-blockを指定したらはみ出なくなりました。
的確なアドバイスありがとうございます。

[new1ro]

<a>や<img>など、標準だとdisplay: inline;が指定されている要素は、
崩れたときにとりあえずdisplay: block;やdisplay: inline-block;を指定すると、特に上下のちょっとした崩れが解消することはよくあるので、何かのときに思い出してみてください。

[akiiii]

返信遅れてすいません。
頭に入れておきます！ありがとうございます！