<a>はインラインのはずなのにpaddingが適応できてしまう？？

前提・実現したいこと

HTML初心者で、初投稿です。
ログインを押すボタンを作成する際に出てきた疑問です。
以下のようなコードで<a href="#" class="login">ログイン</a>に対しpaddingを指定すると添付した画像のようにpaddingがしっかり適応されています。
<a>はインラインで上下のpaddingやmarginは指定できないらしいのですが、今回はできているようです。

ログインを押せる部分を増やすためには<a>をdisplay: block;を用いてblockに変換して親要素いっぱいに広げると教わったのですが、こんなことをしなくても、直接<a href="#" class="login">のCSSのpaddingを広げてしまえばよいと思いましたが、どうでしょうか？

初心者ゆえ、おかしい思考内容かと思いますが、有識者の方の意見が頂戴できれば幸いです。
よろしくお願いいたします。

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプル</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
  <header>
    <div class="contain">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>
  </header>
</body>
</html>

CSS

@charset "UTF-8" ;
.contain {
	background-color: green;
	height: 100px
}
.login {
	color: red;
	float: right;
	padding: 30px;
}

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

回答1件

ベストアンサー

<a>はインラインで上下のpaddingやmarginは指定できないらしいのですが

いえ、指定はできます（MDN）。ただ、パディングが隣の行にはみだして扱いづらい、というだけです。

投稿2019/09/04 09:30

maisumakun

総合スコア145183

gunmed

2019/09/04 14:36

そうだったのですね。参考資料には上下のみと書いてあるのですが、指定はできるのですね。とても勉強になりました、ありがとうございました。またよろしくお願いいたします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！