WordPress

CSS margin & padding の省略形

投稿日:

CSSのマージンとパディング

marginとpaddingは-top, -bottom, -right, -leftと合わせて使いますが、省略形もありますね。

padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;・・・と(上下左右)の4つも書かなくても、全部同じ10pxだったら、padding: 10px;で良いのです。
さらに、(上下)が10pxで(左右)が20pxなら、どうなるでしょう?
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;答えは・・・padding: 10px 20px;で良いのです。

では次の様に、(上下)が別で(左右)が同じ場合はどうなるでしょう?

padding-top: 30px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;

答えは・・・padding: 30px 20px 10px;ですね。つまり(上), (左右), (下)。

最後に(上)(下)(左)(右)全部バラバラな場合、どうしましょうか?

padding-top: 30px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 5px;

もう、お分かりですね。padding: 30px 10px 20px 5px;が一番シンプル系です。

簡単なんですが、3つ数字があると、「何じゃこれ?」と思ったりします。忘れてしまわない様に書き留めて置きました。

スポンサーリンク

-WordPress

関連記事

blog

WordPressセキュリティ対策

WordPress 4.7以上のバージョンでちょっとしたセキュリティ対策が可能です。インストールの際に使ったWordPressのユーザー名と投稿者名が同じ場合、第三者にサイトを乗っ取られやすいくなりま …

WordPress更新エラー Briefly Unavailable…

WordPressのセキュリティやプラグインのアップデートを試みると、Briefly Unavailable For Scheduled Maintenance Error In WordPressが …

blog

サイトをWordPressで作り替える

Htmlで作った古いサイトありますね。 もう10年とか。作り替えるとなる考える点は2つ。 WordPressの新サイトが完成するまで既存のサイトは停止したくない! 作成途中のWordPressの新サイ …

blog

500エラーでサイトが不能!

先日、htmlからWordPressで作り直したサブドメインのサイトに「500 Server error」が出て見れなくなってしまいました。 大ショック! 何も触ってないのに突然なった! サーバーのコ …

blog

パーマリンクの設定

WordPressで最初の投稿を試みると、困った事に日本語タイトルを付けるとリンク先が日本語になってしましました。「パーマリンク: http://…../はじめに」。これではURLをコピペ …

Author Profile
こつこつインフォの筆者こつ子です。
いつも兀々やってます。
出版関係のグラフィックデザイナー。
趣味はWebsiteを作ること、ヨガ、犬と山歩き、フルーツ酒作り。
読んでくれてありがとう〜!
**ご意見はこちらへ**