の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【CSS】paddingとmarginの違いまとめ

             

      2015/01/15

paddingとmarginの違いについてまとめます。

概要

要素:文字列「サンプル」を例に説明します。

padding margin
直訳 詰め物 余白
距離感 要素に近い 要素に遠い
背景色 つく つかない
ボーダー 内側 外側

イメージ図

padding_margin

marginだけの特性

  • marginは相殺する場合がある。あるmargin:20pxの要素と次のmargin:20pxの要素が並ぶと、20pxの余白となる。margin:20pxとpadding:20px;なら40pxの余白になる。
  • マイナスの値が使える。親要素からはみでることが可能。いわゆるネガティブマージン。一方、ネガディブパッディングない。
  • プロパティにautoが使える。左右のmarginにautoを使うとブロック要素をセンタリングできる。
  • widthに含まれます。ちなみにborderも含まれます。

まとめ

padingもmarginもtop,right,bottom,leftを個別に指定することも、まとめて書くこともできます。

まとめる場合は、トップから時計回りでプロパティを指定します。

個人的には省略せずにまとめて書いています。

例えばmarginを上下に10px、左右に20pxとする場合、省略すれば次のようにかけます。

margin : 10px 20px ;

ルールを忘れがちなので、あえて次のように書いてます。

margin : 10px 20px 10px 20px;

 

paddingだっけ?marginだっけ?で悩んでいた人も、この機会に覚えてみてはいかがでしょうか。

 - JS,PHP,CSS , , , , ,

336-280

  関連記事

no image
CSSに関する超個人的なメモ

CSSに関する個人的なメモです。 何回も確認したり、よく使うコードをメモしておき …

no image
【JavaScript】functionでリロードする方法

用途 ボタンをクリックしたらリロードしたい、ある一定時間が経過したらWebページ …

【Webアプリ】iPhoneの画面に合わせて表示したい|画面サイズに合わせてコンテンツを表示する方法

PC向けにつくったWebページを、iPhoneなどのスマホで見たときに画面サイズ …

no image
【JavaScript】getElementByIdでゲットした値を数値にするにはparseIntを使う

JavaScriptの個人的なメモです。 getElementByIdでゲットし …

段組
【CSS】段組レイアウトの基礎・サンプル付き

CSSによる段組レイアウトの基礎とサンプルです。 段組レイアウトサンプル サンプ …