ブラウザの枠とのマージンを指定する

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


margin: ***;

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

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

body要素にこのスタイルを設定すると、ブラウザの枠と内容とのマージンを指定できます。


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


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

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

【指定方法】

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

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

body要素にマージンを指定する場合の注意点

IEやNetscape等のブラウザでは、予めbody要素に適度なマージンが設定されています。これに対しOperaでは、マージンではなく適度なパディングが設定されています。

body要素にマージンを指定した場合、Operaではそのマージンにパディング分の余白が加わってしまうので、他のブラウザより余白が大きく取られてしまいます。

どちらのブラウザでも余白の大きさを同じにしたい場合は、パディングに0を指定しておきます。


使用例

上下左右すべてのマージンを 0 に指定する場合

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

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

body {
margin: 0;
padding: 0;
}


-->
</style>

</head>
<body>



</body>
</html>

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

指定がない場合のサンプル



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

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