paddingとmarginの使い方paddingとmarginの使い方paddingとmarginは要素の間隔を空けるためのCSSプロパティです。paddingは要素の内側の余白、marginは要素の外側の余白を空けるために使用します。CSSを使い始めたころは、paddingとmarginの違いが分からず覚えるのに苦労しました。今回は、このpaddingとmarginの使い方や仕様についてCSSを使い始めたばかりの人にもわかりやすく説明します。paddingとmarginの使い方paddingとmarginの違いpaddingとmarginの指定方法paddingとmarginが使える要素と使えない要素paddingとmarginの違い要素(Element)はこのような構成となっています。要素(Element)とはdivタグやpタグのことで、borderをはさんで内側の余白のことをpaddingといい、外側の余白のことをmarginといいますpaddingとmarginを指定した場合の例paddingとmarginを指定していない場合、以下のようになります。width:200px;">Element</div>Elementpaddingを指定した場合paddingを指定した場合は、このようにborderの内側に10pxの余白が生まれます。padding:10px;">Element</div>Elementmarginを指定した場合paddingを指定した場合は、このようにborderの外側に10pxの余白が生まれます。わかりずらいかもしれませんが、要素の開始位置(左側のborderが書かれる位置)がmarginを指定しないものより10px分右にずれています。margin:10px;">Element</div>Elementpaddingとmarginの指定方法paddingとmarginの指定方法は大きく3つあります。1.四方の一括指定padding/marginは上下左右を個別に指定することも出来ますが、以下の方法は指定した「○○px」の値を四方に一括で指定する方法です。margin:○○px;padding:○○px;2.四方の順次指定padding/marginは上下左右を個別に指定する方法です。左と指定していきます。3px;」と指定すると上に10px,右に7px,下に5px,左に3pxのmarginを取ります。各方向を個別に指定する方法です。上下左右を個別に指定できるため、1方向のみ指定して後はデフォルトの指定を利用したい場合に利用します。*/paddingとmarginが使える要素と使えない要素HTNLの要素の中では、paddingとmarginが使える要素と使えない要素があります。HTMLにはブロックレベル要素とインライン要素の2つがあり、さらにインライン要素の中にはインラインブロック要素というものがあります。paddingとmarginが使えるのはブロックレベル要素とインラインブロック要素の2つでインライン要素にはpaddingとmarginは適応できません。・・・ブロックレベル要素とインライン要素の詳しい内容はこちらの記事が参考になります。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。