paddingとかborderとかmarginの話

今回は、paddingとかborderとかmarginの話をします。

ボックスモデルに関係しているのかな。

今回のhtmlはこちら

<!doctype html>	
<html lang="ja">	
	<head>								
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">			
		<title>Webのタブの名前だよ！</title>
	</head>								
	<body>
		<p class="boxmodel">boxmodelの解説だよ!</p>
	</body>								
</html>

ポイント

・<p></p>タグはblock要素

※画面幅いっぱいに広がる

cssはこちら

* {
　　margin: 0;
　　padding: 0;
}

.boxmodel {
　　background-color: #00ef60;
　　color: white;
}

現在の表示

いきなりですが、ここで一つ問題です。background-color: #00ef60;で色が変わっている範囲は何で決まっているのでしょうか？

こちらの画像を見てみましょう

この画面はディベロッパーツールを使用した画面です。

ブラウザ上で右クリック⇒検証

で画面が遷移するはずです。

右下のこちらに注目してください。

margin、border、padding、980×24(コンテンツ)と書いてありますね？

実は<p></p>タグをはじめとするタグはのすべてはこれらの要素で形成されています。

試しに先ほどのcssを編集し、ブラウザで確認してみると・・・

* {
　　margin: 0;
　　padding: 0;
}

.boxmodel {
　　background-color: #00ef60;
　　color: white;
　　width: 320px;
　　padding: 20px;
　　border: solid 2px black;
　　margin: 10px;
}

width: 320px; コンテンツの幅が320px
padding: 20px; パディングの領域は20px
border: solid 2px black; ボーダーの領域は2pxで色は黒
margin: 10px; マージンの領域は10px

cssの追記により、各領域の大きさを設定できました。

でもこれが何の役に立つの？と疑問を持つ方がいるはず・・・

それぞれには役割というか特性があります。

width	display:block; の幅を決める
padding	padding領域まで背景色は適用される
border	border領域まで背景色は適用されない
margin	要素間の距離をとるのに最使用