[新着] Webテンプレートを仮オープンしました
margin は、マージン(外側の余白)を指定するプロパティです。
table要素にこのスタイルを設定すると、表の周囲にマージンを入れることができます。
table {
margin: 5px;
}
| margin | マージンの大きさを指定します |
|---|
マージンの大きさは、数値+単位(px、他)か %(割合)、auto(自動)で指定します。
マージンの指定方法については、ボックスカテゴリーの「マージン・パディング」の項目をご覧ください。
※以下の使用例では、floatプロパティと組み合わせて使用しています。
※IEの場合、回り込みを指定した表に左右のマージンを指定すると、片側のマージン(以下の使用例では左のマージン)の大きさが2倍になってしまうようです。
■上下に20ピクセル、左右に40ピクセルの余白を指定した場合
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example {
width: 100%;
}
table, td {
border: 2px #2b2b2b solid;
}
table {
width: 200px;
float: left;
margin: 20px 40px;
}
-->
</style>
</head>
<body>
<div id="example">
<table>
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>
<p>
スタイルシートを使った<br>
上下左右の ...
</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
| HP作成A | HP作成B |
| HP作成C | HP作成D |
| HP作成E | HP作成F |
スタイルシートを使った
上下左右のマージンです
。サンプルの文章を書い
てみました。このように
指定すると表と文字の間
に、適度な余白を入れる
ことができます。
この例では、上下に20ピ
クセルのマージンを指定
し左右に40ピクセルのマ
ージンを指定しています。