paddingとmarginの使い方

paddingとmarginは要素の間隔を空けるためのCSSプロパティです。paddingは要素の内側の余白、marginは要素の外側の余白を空けるために使用します。

CSSを使い始めたころは、paddingとmarginの違いが分からず覚えるのに苦労しました。今回は、このpaddingとmarginの使い方や仕様についてCSSを使い始めたばかりの人にもわかりやすく説明します。

paddingとmarginの使い方
  1. paddingとmarginの違い
  2. paddingとmarginの指定方法
  3. paddingとmarginが使える要素と使えない要素

paddingとmarginの違い

margin-padding

要素(Element)はこのような構成となっています。

要素(Element)とはdivタグやpタグのことで、borderをはさんで内側の余白のことをpaddingといい、外側の余白のことをmarginといいます

paddingとmarginを指定した場合の例

paddingとmarginを指定していない場合、以下のようになります。

<div style="border:2px solid #aaa; width:200px;">Element</div>
Element
paddingを指定した場合

paddingを指定した場合は、このようにborderの内側に10pxの余白が生まれます。

<div style="border:2px solid #aaa; width:200px; padding:10px;">Element</div>
Element
marginを指定した場合

paddingを指定した場合は、このようにborderの外側に10pxの余白が生まれます。

少しわかりずらいかもしれませんが、要素の開始位置(左側のborderが書かれる位置)がmarginを指定しないものより10px分右にずれています。

<div style="border:2px solid #aaa; width:200px; margin:10px;">Element</div>
Element

paddingとmarginの指定方法

paddingとmarginの指定方法は大きく3つあります。

1.四方の一括指定

padding/marginは上下左右を個別に指定することも出来ますが、以下の方法は指定した「○○px」の値を四方に一括で指定する方法です。

margin:○○px;
padding:○○px;
2.四方の順次指定

padding/marginは上下左右を個別に指定する方法です。上のpadding/marginから順に空白で区切り右 / 下 / 左と指定していきます。「margin:10px 7px 5px 3px;」と指定すると上に10px,右に7px,下に5px,左に3pxのmarginを取ります。

margin:[上] [右] [下] [左];
padding:[上] [右] [下] [左];
3.各方向の個別指定

各方向を個別に指定する方法です。上下左右を個別に指定できるため、1方向のみ指定して後はデフォルトの指定を利用したい場合に利用します。

/* marginの指定 */
margin-top:○○px;        /* 上 */
margin-right:○○px;      /* 右 */
margin-bottom:○○px;   /* 下 */
margin-left:○○px;        /* 左 */

/* paddingの指定 */
padding-top:○○px;       /* 上 */
padding-right:○○px;     /* 右 */
padding-bottom:○○px;  /* 下 */
padding-left:○○px;       /* 左 */

paddingとmarginが使える要素と使えない要素

HTNLの要素の中では、paddingとmarginが使える要素と使えない要素があります。

HTMLにはブロックレベル要素とインライン要素の2つがあり、さらにインライン要素の中にはインラインブロック要素というものがあります。

paddingとmarginが使えるのはブロックレベル要素とインラインブロック要素の2つでインライン要素にはpaddingとmarginは適応できません。

ブロックレベル要素

<div>, <table>, <h1>, <dl>, <ul>, <ol>, <li>, <p>, ・・・

インラインブロック要素

<img>, <pre>, <button>, <input>, ・・・

インライン要素

<span>, <a>, <b>, <strong>, <em>, <br>, <code>, ・・・

ブロックレベル要素とインライン要素の詳しい内容はこちらの記事が参考になります。

divider

Trackback URL

http://webnonotes.com/css/padding-margin/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>