の まとめ

デジタルガジェットレビュー、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

  関連記事

解像度
Photoshopでjpgのdpiを指定して書き出す方法とjpgの解像度を調べる方法

商標登録するイメージファイルを作る必要がありjpgファイルにdpiを指定すること …

【JavaScript】範囲を決めてランダムな値を1つ表示する方法

ここではJavaScriptでランダムな値を生成する方法を紹介します。 用途 1 …

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

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

paiza.IO を使ってみた

IT/WEBエンジニア向けの転職サービス会社paiza(パイザ)が提供するpai …

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

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