記事一覧

margin と padding と ボックス

 posted by suzu
CSSの基礎知識

HTMLタグ要素に対して余白をあけたいときは、
marginプロパティ、paddingプロパティ を使います。

margin (マージン)   ⇒ 領域間のスペース (外側の余白)
padding (パディング)  ⇒ 領域内のスペース (内側の余白)

ただ単に余白をあけたいだけであれば、どちらを使っても大差ないでしょうが、
枠線 (border) を引くと、どちらをどのように指定するかは大差ありありです。
以下に図解します。
margin-padding

上記のように、marginの中にpaddingが入り、またその中に実際の表示内容が
入るといったように、それぞれが箱の中に入っているイメージになるかと思います。

この「箱のイメージ」は、先の記事 「ブロックレベルとインライン」 で解説した
ブロックレベル要素と被りますが、インライン要素でも
「箱の中に入っている」のは同様です。
(ただし、インライン要素では上下のマージンは効きませんが・・・)
文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します。
これををボックスモデルと言います。

CSSの説明記事では「ボックス」が頻出してきますので、少し触れてみました。

関連記事

eyecatch_css

float の指定と挙動

今回は、先の記事 「ブロックレベルとインライン」 で少し解説した display...

記事を読む

eyecatch_css

ブロックレベルとインライン

CSSでデザインする際に、HTMLタグ要素が ブロックレベル要素であるかインライ...

記事を読む

eyecatch_css

セレクタの種類

WordPressに限った話ではないですが、CSSを使ってページデザインする際に...

記事を読む

カレンダー

2019年12月
« 7月    
1234567
891011121314
15161718192021
22232425262728
293031  
PAGE TOP ↑