の まとめ

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

  関連記事

【CSS】div align=”center”を使わずにmargin autoでセンタリングする方法

divの入れ子でページ内センタリングせずに、左右のmarginをautoにするこ …

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

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

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

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

paiza.IO を使ってみた

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

素のHTML5ファイルを作成する

明日は大晦日。 新しい年に向けて、HTMLファイルをたくさん作る人もいるでしょう …