CSSの margin プロパティ

CSSの margin プロパティで要素間のマージンの大きさを指定できます。

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

margin

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

書式

margin: all

margin: topbottom rightleft

margin: top right bottom left

all

上下左右のマージンの大きさ

<div style="margin: 0; background-color: aquamarine">foo</div>
<div style="margin: 0; background-color: aquamarine; display: inline-block">bar</div>
<div style="margin: 0; background-color: aquamarine; display: inline-block">baz</div>

foo

bar

baz

<div style="margin: 8px; background-color: aquamarine">foo</div>
<div style="margin: 8px; background-color: aquamarine; display: inline-block">bar</div>
<div style="margin: 8px; background-color: aquamarine; display: inline-block">baz</div>

foo

bar

baz

topbottom

上下のマージンの大きさ

<div style="margin: 8px 0; background-color: aquamarine">foo</div>
<div style="margin: 8px 0; background-color: aquamarine; display: inline-block">bar</div>
<div style="margin: 8px 0; background-color: aquamarine; display: inline-block">baz</div>

foo

bar

baz

rightleft

左右のマージンの大きさ

<div style="margin: 0 8px; background-color: aquamarine">foo</div>
<div style="margin: 0 8px; background-color: aquamarine; display: inline-block">bar</div>
<div style="margin: 0 8px; background-color: aquamarine; display: inline-block">baz</div>

foo

bar

baz

top

上側のマージンの大きさ

right

右側のマージンの大きさ

bottom

下側のマージンの大きさ

left

左側のマージンの大きさ

サンプル

要素間のマージンは重複しない。

たとえば、下側マージン 10px の要素と上側マージン 20px の要素が上下に並んでいる場合、その間隔は合計値の 30px ではなく、大きい方の 20px となる。

<div style="margin: 20px 10px 10px 10px; border: 1px solid;">
1
</div>
<div style="margin: 20px 10px 10px 10px; border: 1px solid;">
2
</div>
<div style="margin: 20px 10px 10px 10px; border: 1px solid;">
3
</div>

margin-top

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

要素間のマージンは重複しない。たとえば、下側マージン 10px の要素と上側マージン 20px の要素が上下に並んでいる場合、その間隔は合計値の 30px ではなく、大きい方の 20px となる。

書式

margin-top: margin

属性

margin

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

使用例

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

<div style="display: flex">
  <div style="margin-top: 0; flex: auto; background-color: aquamarine">0</div>
  <div style="margin-top: 10px; flex: auto; background-color: aquamarine; margin-left: 2px">10px</div>
  <div style="margin-top: 20px; flex: auto; background-color: aquamarine; margin-left: 2px">20px</div>
  <div style="margin-top: 30px; flex: auto; background-color: aquamarine; margin-left: 2px">30px</div>
</div>

<div style="display: flex">
  <div style="margin-top: 0; flex: auto; background-color: aquamarine">0</div>
  <div style="margin-top: 1rem; flex: auto; background-color: aquamarine; margin-left: 2px">1rem</div>
  <div style="margin-top: 2rem; flex: auto; background-color: aquamarine; margin-left: 2px">2rem</div>
  <div style="margin-top: 3rem; flex: auto; background-color: aquamarine; margin-left: 2px">3rem</div>
</div>

margin-right

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

要素間のマージンは重複しない。たとえば、右側マージン 10px の要素と左側マージン 20px の要素が左右に並んでいる場合、その間隔は合計値の 30px ではなく、大きい方の 20px となる。

書式

margin-right: margin

属性

margin

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

使用例

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

<p style="margin-right: 10px; background-color: aquamarine">10px</p>
<p style="margin-right: 20px; background-color: aquamarine">20px</p>
<p style="margin-right: 30px; background-color: aquamarine">30px</p>

10px

20px

30px

<p style="margin-right: 1em; background-color: aquamarine">1em</p>
<p style="margin-right: 2em; background-color: aquamarine">2em</p>
<p style="margin-right: 3em; background-color: aquamarine">3em</p>

1em

2em

3em

<p style="margin-right: 10%; background-color: aquamarine">10%</p>
<p style="margin-right: 20%; background-color: aquamarine">20%</p>
<p style="margin-right: 30%; background-color: aquamarine">30%</p>

10%

20%

30%

CSS プロパティの margin-right に auto を指定すると、ブラウザが自動的にマージンを設定する。margin-left と margin-right に auto を指定すると、中央寄せになる。

<p style="margin-right: auto; background-color: aquamarine">auto</pv>
<p style="margin-right: auto; background-color: aquamarine; width: 200px">auto</pv>
<p style="margin-right: auto; background-color: aquamarine; width: 200px; margin-left: auto">auto</p>

auto

auto

auto

margin-bottom

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

要素間のマージンは重複しない。たとえば、下側マージン 10px の要素と上側マージン 20px の要素が上下に並んでいる場合、その間隔は合計値の 30px ではなく、大きい方の 20px となる。

書式

margin-bottom: margin

属性

margin

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

使用例

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

<div style="display: flex">
  <div style="margin-bottom: 0; flex: auto; background-color: aquamarine">0</div>
  <div style="margin-bottom: 10px; flex: auto; background-color: aquamarine; margin-left: 2px">10px</div>
  <div style="margin-bottom: 20px; flex: auto; background-color: aquamarine; margin-left: 2px">20px</div>
  <div style="margin-bottom: 30px; flex: auto; background-color: aquamarine; margin-left: 2px">30px</div>
</div>

<div style="display: flex">
  <div style="margin-bottom: 0; flex: auto; background-color: aquamarine">0</div>
  <div style="margin-bottom: 1rem; flex: auto; background-color: aquamarine; margin-left: 2px">1rem</div>
  <div style="margin-bottom: 2rem; flex: auto; background-color: aquamarine; margin-left: 2px">2rem</div>
  <div style="margin-bottom: 3rem; flex: auto; background-color: aquamarine; margin-left: 2px">3rem</div>
</div>

margin-left

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

要素間のマージンは重複しない。たとえば、右側マージン 10px の要素と左側マージン 20px の要素が左右に並んでいる場合、その間隔は合計値の 30px ではなく、大きい方の 20px となる。

書式

margin-left: margin

属性

margin

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

使用例

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

<p style="margin-left: 10px; background-color: aquamarine">10px</p>
<p style="margin-left: 20px; background-color: aquamarine">20px</p>
<p style="margin-left: 30px; background-color: aquamarine">30px</p>

10px

20px

30px

<p style="margin-left: 1em; background-color: aquamarine">1em</p>
<p style="margin-left: 2em; background-color: aquamarine">2em</p>
<p style="margin-left: 3em; background-color: aquamarine">3em</p>

1em

2em

3em

<p style="margin-left: 10%; background-color: aquamarine">10%</p>
<p style="margin-left: 20%; background-color: aquamarine">20%</p>
<p style="margin-left: 30%; background-color: aquamarine">30%</p>

10%

20%

30%

CSS の margin-left プロパティに auto を指定すると、ブラウザが自動的にマージンを設定する。margin-left と margin-right に auto を指定すると、中央寄せになる。

<p style="margin-left:auto; background-color: aquamarine">auto</p>
<p style="margin-left:auto; background-color: aquamarine; width: 200px">auto</p>
<p style="margin-left:auto; background-color: aquamarine; width: 200px; margin-right: auto">auto</p>

auto

auto

auto

関連記事

CSSの border-right プロパティ

参考文献

World Wide Web Consortium (2022) CSS Box Model Module Level 3