margin

スタイルシート属性 margin は、マージンの大きさを指定します。マージンとは枠線 (border) と他の要素との余白のことです。

margin (marginとpaddingの境界線がborder)
padding
表示要素

書式

margin: top right bottom left

属性

top
上側のマージンの大きさを指定します。大きさの単位はpx、em、%のいずれかを使用します。
right
右側のマージンの大きさを指定します。
bottom
下側のマージンの大きさを指定します。
left
左側のマージンの大きさを指定します。

margin-top

スタイルシート属性 margin-top は、マージンの大きさを指定します。マージンとは枠線 (border) と他の要素との余白のことです。

書式

margin-top: margin

属性

margin
上側のマージンの大きさを指定します。大きさの単位はpx、em、%のいずれかを使用します。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 margin-top の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="margin-top: 1em; border: 1px solid">margin-top: 1em</p>

margin-top: 1em

<p style="margin-top: 2em; border: 1px solid">margin-top: 2em</p>

margin-top: 2em

<p style="margin-top: 3em; border: 1px solid">margin-top: 3em</p>

margin-top: 3em

margin-right

スタイルシート属性 margin-right は、マージンの大きさを指定します。マージンとは枠線 (border) と他の要素との余白のことです。

書式

margin-right: margin

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 margin-right の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="margin-right: 0em; border: 1px solid">margin-right: 0em</p>

margin-right: 0em

<p style="margin-right: 10em; border: 1px solid">margin-right: 10em</p>

margin-right: 10em

<p style="margin-right: 20em; border: 1px solid">margin-right: 20em</p>

margin-right: 20em

margin-rightにautoを指定すると、ブラウザが自動的にマージンを設定します。

<div style="margin-right:auto; width:300px; border:1px solid">要素</div>
要素

margin-leftとmargin-rightにautoを指定すると、中央寄せになります。ただし、Internet Explorer 6以前では左寄せになります。

<div style="margin-left:auto; margin-right:auto; width:300px; border:1px solid">要素</div>
要素

margin-bottom

スタイルシート属性 margin-bottom は、マージンの大きさを指定します。マージンとは枠線 (border) と他の要素との余白のことです。

書式

margin-bottom: margin

属性

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

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 margin-bottom の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="margin-bottom: 1em; border: 1px solid">margin-bottom: 1em</p>

margin-bottom: 1em

<p style="margin-bottom: 2em; border: 1px solid">margin-bottom: 2em</p>

margin-bottom: 2em

<p style="margin-bottom: 3em; border: 1px solid">margin-bottom: 3em</p>

margin-bottom: 3em

margin-left

スタイルシート属性 margin-left は、マージンの大きさを指定します。マージンとは枠線 (border) と他の要素との余白のことです。

書式

margin-left: margin

属性

margin
左側のマージンの大きさを指定します。大きさの単位はpx、em、%のいずれかを使用します。autoを指定するとブラウザ規定依存になります。この場合、たいてい中央寄せになりますが、古いInternet Explorerでは左寄せになります。

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 0.3
Opera 9.62
Safari 3.2.1

使用例

スタイルシート属性 margin-left の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

<p style="margin-left: 0px; border: 1px solid">margin-left: 0px</p>

margin-left: 0px

<p style="margin-left: 100px; border: 1px solid">margin-left: 100px</p>

margin-left: 100px

<p style="margin-left: 0em; border: 1px solid">margin-left: 0em</p>

margin-left: 0em

<p style="margin-left: 2em; border: 1px solid">margin-left: 2em</p>

margin-left: 2em

<p style="margin-left: 0%; border: 1px solid">margin-left: 0%</p>

margin-left: 0%

<p style="margin-left: 25%; border: 1px solid">margin-left: 25%</p>

margin-left: 25%

<p style="margin-left:auto; border: 1px solid">margin-left: auto</p>

margin-left: auto

margin-leftにautoを指定すると、ブラウザが自動的にマージンを設定します。

<div style="margin-left:auto; width:300px; border:1px solid">要素</div>
要素

margin-leftとmargin-rightにautoを指定すると、中央寄せになります。ただし、Internet Explorer 6以前では左寄せになります。

<div style="margin-left:auto; margin-right:auto; width:300px; border:1px solid">要素</div>
要素