の まとめ

デジタルガジェットレビュー、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
【JavaScript】functionでリロードする方法

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

【CSS】CSSで作るプルダウン/ドロップダウンメニュー

CSS初心者でも簡単に実装できるプルダウン/ドロップダウンメニューをご紹介します …

SNS
SNSのシェアボタンをまとめて作る方法

Twitter、Facebook、はてブ、Google+でシェアするためのボタン …

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

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

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

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