インラインフレームの周囲にマージンを入れる

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


margin: ***;

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

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

iframe要素にこのスタイルを設定すると、インラインフレームの周囲にマージンを入れることができます。


#example {
margin: 5px;
}


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

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

マージンの指定方法については、ボックスカテゴリーの「マージン・パディング」の項目をご覧ください。

※以下の使用例では、floatプロパティと組み合わせて使用しています。


使用例

上下に30ピクセル、左右に60ピクセルの余白を指定した場合

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

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

iframe {
width: 200px;
height: 100px;
}


#example1 { width: 100%; }

#example2 {
float: left;
margin: 30px 60px;
}


-->
</style>

</head>
<body>

<div id="example1">

<iframe src="example.html" id="example2">サンプル</iframe>
<p>
スタイルシートを使<br>
った上下左右 ...
</p>

</div>

</body>
</html>

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

スタイルシートを使
った上下左右のマー
ジンです。サンプル
の文章を書いてみま
した。このように指
定するとインライン
フレームと文字の間
に、適度な余白を入
れることができます。
この例では、上下に
30ピクセルのマージ
ンを指定し左右に60
ピクセルのマージン
を指定しています。



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

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