の まとめ

デジタルガジェットレビュー、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ボタンデザイン
CSSで実装する見た目もコードもシンプルなボタンサンプル【決定版】

シンプルで、飽きずに、フラットデザインっぽくても、アフォードする、そんなボタンを …

【初心者向け】簡単・おすすめ「jQuery」と「bxslider」によるスライドショーの設定方法

JavaScriptで簡単にスライドショーを実装するなら「jQuery」と「bx …

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

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

【Webアプリ】iPhoneで画面の向きを検知したい|スマホの傾きを検知して表示する方法

Webページでスマホの傾きを検知する方法を紹介します。 手順 1.HEADタグ内 …

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

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