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です。 そこで、簡単にスマホのヘッドメニューをスライド式に変更しました。 実際のと …

blog

自動でGoogleサイトマップ

SEO!! 昔(15年ぐらい前?)はマニュアルでSitemap.xmlを作成して、Googleに提出してたんですけど、もうそんな時代ではないのですね・・・ ***自動でGoogleサイトマップを作成し …

blog

パーマリンクの設定

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

blog

サイトをWordPressで作り替える

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

blog

ブログを始める

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

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