読者です 読者をやめる 読者になる 読者になる

HHeLiBeXの日記 正道編

日々の記憶の記録とメモ‥

margin/border/paddingの指定方法メモ

CSSのmargin/border/paddingは、四辺を一括で指定する方法から四辺を個別に指定する方法まであって、どの形式でどの辺が影響を受けるのかがしょっちゅう分からなくなるので、自分用のメモ。

一応、以下のブラウザで確認。

本当はブログ記事上で表現できればよかったのだが、はてな記法をエスケープしたりするのが面倒だったので、画面キャプチャを貼り付け(ぉ

ちなみに、使用したソースは以下のとおり。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>margin/border/padding</title>
</head>
<body>
<style type="text/css">
.my_root {
	background-color: #888;
	margin: 0;
	border-width: 0;
	padding: 10px;
}
.my_frame {
	border-width: 2px;
	border-color: yellow;
	border-style: solid;
	display: inline-block;
}
.my_sample {
	border-style: solid;
	background-color: #fff;
}
.my_sample1_1 {
	margin:       10px;
	border-width: 20px;
	border-color: #f00;
	padding:      40px;
}
.my_sample2_1 {
	margin:       10px;
	border-width: 10px;
	border-color: #f00;
	padding:      10px;
}
.my_sample2_2 {
	margin:       10px 20px;
	border-width: 10px 20px;
	border-color: #f00 #0f0;
	padding:      10px 20px;
}
.my_sample2_3 {
	margin:       10px 20px 30px;
	border-width: 10px 20px 30px;
	border-color: #f00 #0f0 #00f;
	padding:      10px 20px 30px;
}
.my_sample2_4 {
	margin:       10px 20px 30px 40px;
	border-width: 10px 20px 30px 40px;
	border-color: #f00 #0f0 #00f #ff0;
	padding:      10px 20px 30px 40px;
}
</style>
<div class="my_root">
<div class="my_frame">
<pre class="my_sample my_sample1_1">
<外から順に
    margin
    border
    padding      >
margin:       10px;
border-width: 20px;
border-color: #f00;
padding:      40px;
</pre>
</div>

<div style="clear: both;"></div>

<div class="my_frame">
<pre class="my_sample my_sample2_1">
<四辺すべて>
margin:       10px;
border-width: 10px;
border-color: #f00;
padding:      10px;
</pre>
</div>
<div class="my_frame">
<pre class="my_sample my_sample2_2">
<上下><左右>
margin:       10px 20px;
border-width: 10px 20px;
border-color: #f00 #0f0;
padding:      10px 20px;
</pre>
</div>

<div style="clear: both;"></div>

<div class="my_frame">
<pre class="my_sample my_sample2_3">
<上><左右><下>
margin:       10px 20px 30px;
border-width: 10px 20px 30px;
border-color: #f00 #0f0 #00f;
padding:      10px 20px 30px;
</pre>
</div>
<div class="my_frame">
<pre class="my_sample my_sample2_4">
<上><右><下><左>
margin:       10px 20px 30px 40px;
border-width: 10px 20px 30px 40px;
border-color: #f00 #0f0 #00f #ff0;
padding:      10px 20px 30px 40px;
</pre>
</div>
</div>
</body>
</html>