ボックスのマージン(外側の余白)を指定する

[新着] Webテンプレートを仮オープンしました


margin: ***;

ブラウザ
Internet Explorer Netscape Firefox Opera
参考
書式基本 要素名 クラス ID

margin は、マージン(外側の余白)を指定するプロパティです。


div {
margin: 5px 10px 15px 20px;
}


margin マージンの大きさを指定します

マージンの大きさは、数値+単位(px、他)か %(割合)、auto(自動)で指定します。

【指定方法】

margin: 2px; … [上下左右] を指定
margin: 2px 4px; … [上下] と [左右] を指定
margin: 2px 4px 6px; … [上] と [左右] と [下] を指定
margin: 2px 4px 6px 8px; … [上] と [右] と [下] と [左] を指定

上記例のように、4タイプの指定方法があります。
それぞれの値は、半角スペースで区切って記述します。

【マージンとパディング】

マージンとパディング


使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

p { background-color: #85b9e9; }

#example1 { margin: 50px; }
#example2 { margin: 50px 100px; }
#example3 { margin: 50px 10px 50px 200px; }


-->
</style>

</head>
<body>

<p id="example1">上下左右に50pxのマージン</p>
<p id="example2">上下に50px、左右に100pxのマージン</p>
<p id="example3">上下に50px、左に200px、右に10pxのマージン</p>

</body>
</html>

これをブラウザで見ると次のように表示されます

上下左右に50pxのマージン

上下に50px、左右に100pxのマージン

上下に50px、左に200px、右に10pxのマージン



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版