[新着] Webテンプレートを仮オープンしました
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>
▼これをブラウザで見ると次のように表示されます