paddingとmarginの使い方
![094[1]](http://i2.wp.com/webnonotes.com/wp-content/uploads/2015/06/0941.jpg?resize=300%2C225)
paddingとmarginは要素の間隔を空けるためのCSSプロパティです。paddingは要素の内側の余白、marginは要素の外側の余白を空けるために使用します。
CSSを使い始めたころは、paddingとmarginの違いが分からず覚えるのに苦労しました。今回は、このpaddingとmarginの使い方や仕様についてCSSを使い始めたばかりの人にもわかりやすく説明します。
paddingとmarginの違い
要素(Element)はこのような構成となっています。
要素(Element)とはdivタグやpタグのことで、borderをはさんで内側の余白のことをpaddingといい、外側の余白のことをmarginといいます
paddingとmarginを指定していない場合、以下のようになります。
<div style="border:2px solid #aaa; width:200px;">Element</div>
paddingを指定した場合は、このようにborderの内側に10pxの余白が生まれます。
<div style="border:2px solid #aaa; width:200px; padding:10px;">Element</div>
paddingを指定した場合は、このようにborderの外側に10pxの余白が生まれます。
少しわかりずらいかもしれませんが、要素の開始位置(左側のborderが書かれる位置)がmarginを指定しないものより10px分右にずれています。
<div style="border:2px solid #aaa; width:200px; margin:10px;">Element</div>
paddingとmarginの指定方法
paddingとmarginの指定方法は大きく3つあります。
padding/marginは上下左右を個別に指定することも出来ますが、以下の方法は指定した「○○px」の値を四方に一括で指定する方法です。
margin:○○px; padding:○○px;
padding/marginは上下左右を個別に指定する方法です。上のpadding/marginから順に空白で区切り右 / 下 / 左と指定していきます。「margin:10px 7px 5px 3px;」と指定すると上に10px,右に7px,下に5px,左に3pxのmarginを取ります。
margin:[上] [右] [下] [左]; padding:[上] [右] [下] [左];
各方向を個別に指定する方法です。上下左右を個別に指定できるため、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>, ・・・
ブロックレベル要素とインライン要素の詳しい内容はこちらの記事が参考になります。
Related Posts

« サブウィンドウから値を取得するjavascript CSSで角を丸くするborder-radiusの使い方 »
Trackback URL
http://webnonotes.com/css/padding-margin/trackback/No Comments Yet