超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > ボックスの余白 > Next 

■ ボックスの余白に関する設定

ボックスの余白といっても2つあります。1つはボックスとその周囲(他のボックスなど)との間隔、もう1つはボックスの枠線とその中の文字との間隔です。前者をマージン( margin )と言い、後者をパディング( padding )と言います。つまり、マージンはボックスの外側の余白、パディングはボックスの内側の余白ということです。

プロパティ説明
margin
margin-top
margin-left
margin-right
margin-bottom
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
auto自動調整
padding
padding-top
padding-left
padding-right
padding-bottom
単位mm,cm,pt,pxなど
親要素の指定値に対する割合
auto自動調整

◆ボックスのマージンを指定する

<html>
<head>
<title>ボックスのマージン</title>
<style type="text/css">
<!--
body{
 background-image:url("oekaki2.gif");
 background-attachment:fixed;
}
div{ background-color:#fcc; color:#000; }
.1margin{ margin:10%; }
.2margin{ margin:20px 100px; }
-->
</style>
</head>
<body>
<div>
ここはマージンを指定していません。
</div>
<div class="1margin">
プロパティ値を1つだけ記述すると、上下左右全て共通のマージンになります。ここは、上下左右全て10%で指定しました。
</div>
<div class="2margin">
プロパティ値を2つ記述すると、1つめの値が上下、2つめの値が左右のマージンになります。ここは、上下20px、左右100pxのマージンを指定しました。
</div>
</body>
</html>

ページはこのように表示されます。指→ ★ margin

margin プロパティも border プロパティと同じように、プロパティ値が1つだけだと、上下左右同じ値を指定したことになり、2つ指定すると、1つめが上下、2つめが左右のマージンになります。3つ指定すると、上、左右、下の順、4つ指定すると、上、右、下、左の順(時計回り)になります。 また、margin-top 、margin-left プロパティなどで、個別に指定することもできます。

タグ名{ margin:top値 right値 bottom値 left値; }

マージンにマイナス(−)を使うこともできます。マイナスを使えばブロックや文字を重ねることもできます。


◆ボックスのパディングを指定する

(css file)
div{ background-color:#cf9; }
.1padding{ padding:10%; }
.2padding{ padding:20px 100px; }

(html file)
<div>
ここはパディングを指定していません。
</div>
<div class="1padding">
プロパティ値を1つだけ記述すると、上下左右全て共通のパディングになります。ここは、上下左右全て10%で指定しました。
</div>
<div class="2padding">
プロパティ値を2つ記述すると、1つめの値が上下、2つめの値が左右のパディングになります。ここは、上下20px、左右100pxのパディングを指定しました。
</div>

ここはパディングを指定していません。
プロパティ値を1つだけ記述すると、上下左右全て共通のパディングになります。ここは、上下左右全て10%で指定しました。
プロパティ値を2つ記述すると、1つめの値が上下、2つめの値が左右のパディングになります。ここは、上下20px、左右100pxのパディングを指定しました。

padding プロパティも border プロパティ、margin プロパティと同じように、プロパティ値が1つだけだと、上下左右同じ値を指定したことになり、2つ指定すると、1つめが上下、2つめが左右のパディングになります。3つ指定すると、上、左右、下の順、4つ指定すると、上、右、下、左の順(時計回り)になります。 また、padding-top 、padding-left プロパティなどで、個別に指定することもできます。

タグ名{ padding:top値 right値 bottom値 left値; }


 Home < 超初心者のためのスタイルシート講座 < Back < ボックスの余白 > Next