cssの上下のpaddingを指定したい

Question

実現したいこと

cssの上下のpaddingを指定したいです。

発生している問題・分からないこと

上下それぞれ、60px,30pxにしたいのですが、
padding:60px 30px;
だと×になります。
どうしてか教えて欲しいです。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

答えを見ると、psddind-top:60px;
padding-bottom:30px;
となっていますが、
上下指定なら、padding:60px 30px;でも良いのではないですか？

補足

すみません。後々自分で間違えに気づいたため、
質問を閉めます。

Comments

[int32_t]

「×になります」について詳細を書いてください。なんのソフト上で何をしたときにどのように「×になる」のでしょうか。

Answer 1

padding: 60px 0px 30px 0px;

この記述方法が正しいです。
padding: 上 右 下 左;
となっています。

質問者さんが書いたコードは
padding: 上下 左右;
となります。

詳しくは、
CSS【padding】～パディングとショートハンド
こちらを見てください。

Comments

[mirai_2]

回答ありがとうございます。
詳しく教えていただきありがとうございます。
お陰さまで解決しました。
またよろしくお願いいたしますm(* _ _)m

Answer 2

今なら padding-block 使って 下記の書き方でも良さそうですね。

padding-block: 60px 30px;

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

※ただし、論理プロパティなのでこれは横書き (writing-mode: horizontal-tb) の場合に限りますが。

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

CSS 論理的プロパティと値 - CSS: カスケーディングスタイルシート | MDN