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

検索ボックスのphpをショートコードにして投稿や固定ページに入れる

 WordPressでの検索ボックスの表示はphpコード、<?php get_search_form(); ?>です。phpコードを投稿ページや固定ページに書き込んでも表示されませんね。そ …

blog

WordPressのテーマで選択でトラブル

WordPressで作り替えたい古いサイトがあったので、Stinger8以外でやってみることにしました。 基本は現サイトからあまりイメージを変えずに、レシポンシブサイト(スマホ対応)にすることでした。 …

blog

サーバーのセキュリティーをパーミッションで強化

WordPressのセキュリティーについてはこちらで書きましたが、サーバーのセキュリティーも重要です。初期設定ではクラッカー&ハッカーに狙われますので、コントロールパネルでパーミションを変更しましょう …

blog

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

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

blog

ブログを始める

自分のブログ=サイトを始める 後々にアフィリエイトで収入を得たい人は特に自分が運営する独自のウェブサイトを作成たいですよね。 アメブロ等の無料ブログは便利ですが、アフィリエイトに関しての規正があります …

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