CSS
マージン

構文

• マージン： <上＆右＆下＆左> ;
• マージン： <top> 、 <left＆right> 、 <bottom>
• マージン： <上＆下> 、 <左＆右> ;
• マージン： <top> 、 <right> 、 <bottom> 、 <left> ;
• margin-top： <top> ;
• margin-right： <right> ;
• margin-bottom： <bottom> ;
• margin-left： <left> ;

パラメーター

備考

特定の側に余白を適用する

方向固有のプロパティ

CSSでは、マージンを適用する側を指定することができます。この目的のために提供される4つのプロパティは次のとおりです。

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

次のコードは、選択したdivの左側に30ピクセルのマージンを適用します。 結果を見る

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}

簡略化プロパティを使用した方向の指定

標準marginプロパティを展開して、選択した要素の各辺に異なる幅を指定することができます。これを行うための構文は次のとおりです。

margin: <top> <right> <bottom> <left>;

次の例では、divの上端にゼロ幅のマージンを適用します。右側には10ピクセルのマージン、左側には50ピクセルのマージン、左側には100ピクセルのマージンを適用します。 結果を見る

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}

マージン折りたたみ

2つのマージンが垂直にお互いに接触すると、それらは折りたたまれます。 2つのマージンが水平に接触すると、それらは崩壊しません。

隣接垂直マージンの例：

次のスタイルとマークアップを考えてみましょう。

div{
    margin: 10px;
}

<div>
    some content
</div>
<div>
    some more content
</div>

垂直マージンが1つまたは2つ以上崩壊するため、10ピクセル離れています。 （間隔は2つのマージンの合計ではありません）。

隣接水平余白の例：

次のスタイルとマークアップを考えてみましょう。

span{
    margin: 10px;
}

<span>some</span><span>content</span>

横のマージンが1つまたは2つ以上崩壊することはないので、20ピクセル離れています。 （間隔は2つのマージンの合計になります）。

異なるサイズのオーバーラップ

.top{
    margin: 10px;
}
.bottom{
    margin: 15px;
}

<div class="top">
    some content
</div>
<div class="bottom">
    some more content
</div>

これらの要素は垂直方向に15ピクセル離れて配置されます。マージンは可能な限り重複しますが、マージンが大きいほどエレメント間の間隔が決まります。

重複マージン

.outer-top{
    margin: 10px;
}
.inner-top{
    margin: 15px;
}
.outer-bottom{
    margin: 20px;
}
.inner-bottom{
    margin: 25px;
}

<div class="outer-top">
    <div class="inner-top">
        some content
    </div>
</div>
<div class="outer-bottom">
    <div class="inner-bottom">
        some more content
    </div>
</div>

2つのテキストの間隔はどうなりますか？ （ホバーして答えを見る）

間隔は25ピクセルです。 4つのマージンはすべて互いに接触しているため、4つのマージンのうち最大のマージンを使用して崩壊します。

上記のマークアップにいくつかの境界線を追加するとどうなりますか？

div{
    border: 1px solid red;
}

2つのテキストの間隔はどうなりますか？ （ホバーして答えを見る）

間隔は59pxになります！外面と外面のマージンだけが互いに接触し、唯一の崩壊マージンです。残りの余白は境界で区切られています。だから我々は1px + 10px + 1px + 15ピクセル + 20px + 1px + 25px + 1px （1ピクセルは境界線です...）

親要素と子要素の間のマージンの折りたたみ：

HTML：

<h1>Title</h1>
<div>
  <p>Paragraph</p>
</div>

CSS

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 50px 0 0 0;
  background: #cfc;
}
p {
  margin: 25px 0 0 0;
  background: #cf9;
}

上記の例では、最大のマージンのみが適用されます。段落がh1から60pxに位置することが予想されるかもしれません（div要素の余白は40px、pの余白は20pxです）。マージンが1つのマージンを形成するために一緒に崩壊するため、これは起こりません。

マージンを使用してページ上の要素を水平方向に中央揃えする

要素がブロックであり、 明示的に設定された幅の値を持つ限り、マージンを使用して、ページ上のブロック要素を水平方向にセンタリングすることができます。

ウィンドウの幅よりも小さい幅の値を追加し、marginのautoプロパティは残りのスペースを左右に分配します。

#myDiv {
 width:80%;
 margin:0 auto;
}

上記の例では、省略margin宣言を使用して最初に0を上限と下限のマージン値に設定します（これは任意の値になります）。次にautoを使用して、ブラウザがスペースを自動的に左右のマージン値に割り当てるようにします。

上記の例では、#myDiv要素は80％の幅に設定され、残りの20％を残しています。ブラウザはこの値を残りの部分に分配します：

（100％〜80％）/ 2 = 10％

マージンプロパティの簡素化

p {
    margin:1px;                /* 1px margin in all directions */
    
    /*equals to:*/
    
    margin:1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px;
    
    /*equals to:*/
    
    margin:1px 1px 1px 1px;
}

もう一つのexapmle：

p{
    margin:10px 15px;        /* 10px margin-top & bottom And 15px margin-right & left*/
    
    /*equals to:*/
    
    margin:10px 15px 10px 15px;
    
    /*equals to:*/
    
    margin:10px 15px 10px;
    /* margin left will be calculated from the margin right value (=15px) */
}

負のマージン

マージンは、負の値に設定できるいくつかのCSSプロパティの1つです。このプロパティを使用すると、 絶対配置なしで要素をオーバーラップさせることができます。

div{
  display: inline;
}

#over{
  margin-left: -20px;
}

<div>Base div</div>
<div id="over">Overlapping div</div>

例1：

margin-leftとmargin-rightに対するmargin-leftパーセンテージ値は、その親要素に対して相対的であると仮定することは明らかである。

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px */
}

しかし、 margin-topとmargin-bottomには、そうではありません。これらのプロパティは両方とも、親コンテナの高さに相対的ではなく、親コンテナの幅に相対的です。

そう、

.parent {
    width : 500px;
    height: 300px;
}

.child {
    width : 100px;
    height: 100px;
    margin-left: 10%;  /* (parentWidth * 10/100) => 50px  */
    margin-top: 20%;   /* (parentWidth * 20/100) => 100px */
}