サイト内検索

...スタイルシート(css)...

スタイルシート・ボックス

外側の余白

外側の余白は、marginプロパティを指定します。
[使い方]
.sample{margin: 20px 30px;}
.sample{margin-top: 10px;}

「paddingとmarginの違い」は、こちらをご覧ください。

プロパティ名 説明
margin:; 「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。
auto(自動)

[marginの指定方法]
プロパティ名
(サンプル)
説明
margin:10px;上下左右  の指定をします。
margin:10px 20px;上下・左右 の指定をします。
margin:10px 20px 30px;上・ 左右・下 の指定をします。
margin:10px 20px 30px 40px;上・右 ・下・左  の指定をします。

[個別の設定方法]
プロパティ名
(サンプル)
説明
margin-top: 10px;上のマージン(余白)を指定します。
margin-right: 20px;右のマージン(余白)を指定します。
margin-bottom: 30px;下のマージン(余白)を指定します。
margin-left: 40px;左のマージン(余白)を指定します。

サンプル

[headの中]

<style type="text/css">
<!--
.sam{
background-color: #ccff99;
}
.sample1{
margin: 50px 200px;
}
.sample2{
margin-top: 10px
margin-right: 200px;
}
-->
</style>

[bodyの中]

<div class="sample1">上下に50px・左右に200pxのmargin </div>
<div class="sample2">margin-top:10px・margin-right:200px;のmargin </div>

[ブラウザ上]

上下に50px・左右に200pxのmargin
margin-top: 10px・margin-left: 200px; のmargin

Copyright c 2007.10.01 luc All rights reserved.