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

Stinger8の投稿日と更新日の消去

Stinger8のテーマで投稿日と更新日が必要のないサイトを作成する場合ってありますよね。 基本は4つのphpファイルを変更することで、消去可能です。 固定ページの下の投稿日と更新日を消去 「inde …

blog

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

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

blog

WordPressの管理画面にログインできない

WordPressの管理画面にログインできない! 困りました。突然、ログインできなくなりました。 ログインしようとすると、ブラウザで”This Page isn’t worki …

blog

Stinger8のサイドバーを無くす方法

Pet 関連サイトのリスティングサイトなんですが、大きく地図を使うレイアウトにするため、サイドバーをなくしてメインを1コラムにすることにしました。単にsidebar.phpを開いて内容を消去する方法も …

blog

スマホのスライド式メニュー

使っているテーマのスマホのヘッドメニューは、ドロップダウンメニューなので本文が隠れるのですね。ちなみにStinger8です。 そこで、簡単にスマホのヘッドメニューをスライド式に変更しました。 実際のと …

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