CSS : 論理プロパティについて再び

まず、ボックスモデルについてまだ知識が浅い場合はこちら。
https://qiita.com/suiru_nakamura/items/f81eb7a4b0bc696cf01d

![margin1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/b52960bc-dd9c-81d4-c4a2-591d6add6afc.png)


marginの種類

marginにはプロパティが用意されており、省略も簡単。

個別指定
・margin-top
・margin-bottom
・margin-left
・margin-right

marginの省略
・margin:0;(上下左右）
・margin:0 0;(上下）（左右）
・margin:0 0 0;（上）（左右）（下）
・margin:0 0 0 0;（上）（右）（下）（左）

論理プロパティ
・margin-start
・margin-end
・margin-before
・margin-after

margin-topなどは見慣れてるけど、margin-startは初めてという方もいると思う。margin-(start|end|before|after)は回転方式のブロックに対して、提案されたもの。
margin-topは、画面から見た物理的な方向に対し、margin-startは、物理的な方向になる。
横書きにmargin-startが指定されている場合は、margin-leftが適用される。
縦書きになった場合は、margin-startは、margin-topが適用されることになる。![margin2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/e1c9db2d-e016-e36d-0147-96a24a26fc77.png)

このプロパティを使用することにより、同一のcssで縦書き、横書きの切替がスムーズになる可能性を持っている。


marginとautoとwidthの関係

marginに対して、autoを設定した場合は数値は0になる。しかし、横幅（width）を指定した状態で、marginの左右のどちらかにautoを指定すると、指定した方に数値を算出する。

ブラウザの幅が600pxの場合
div {
  width:100px;
  margin-left: auto;
}![margin3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/e53cd7e9-f44c-9e43-08be-f886846f88de.png)

上記の例なら、ブラウザの幅が600pxなので、margin-leftは自動で500pxになる。


marginの中央配置

横幅を指定した状態で、margin-left, margin-rightにautoを指定した場合。左右等分のmarginが算出され、ボックスは中央に配置される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/655c4a12-71f2-e839-b92c-947c4de6c25d.png)

Negative Margin(ネガティブ・マージン）

marginの数値をマイナス指定することによって、要素を移動や、要素を配置する。パターンから外れたレイアウトを組む際に、お世話になることが多い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/044a2a74-34d6-c807-d82b-41ca6e31c28c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/613e9290-245c-a414-6e55-8c039039c066.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/138dd9a9-dec3-e443-628a-7a93195aff8f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/31ecf255-b5d2-1a10-3d87-014c69c6da7e.png)

ネガティブマージンを使用すると、レイアウトの幅が広がる。ただし、上記ソースの1つ1つの意味が、理解できていないうちは、多様すべきではない。


marginとpadding

marginでも、paddingでも、空間を開けることが可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/17b4ad38-8123-7667-f57b-49dfca3a86e5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/e66fc0df-bf1d-665c-1d4f-b3d91edc8626.png)
margin,padding共に、空間を開けることができる。見た目は同じに見えるが、挙動は全く違う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/7c53658d-b011-23f2-1cea-65a8b3ef3ebb.png)
paddingは、背景色や、枠線にも影響して余白を開けることができるが、marginは要素ごとで間隔を開けることができる。


marginの相殺

paddingにはない機能として、marginの相殺がある。相殺はmargin同士が重なった場合に起こり、「marginが使いづらい」という印象を与える最大の理由かもしれない。
特定のケースだと、相殺が起きないなどすごい動きをする。
しかし、marginの相殺を理解することで、marginの単一方向の指定や、paddingを使用するよりも、HTML、CSSをクリーンに書ける場合も多くある。


<style type="text/css">
.margin {
  margin:10px 0; /* 上下に1emを指定 */
}
.padding {
  padding:10px 0; /* 上下に1emを指定 */
}
</style>

<div class="margin">aa</div>
<div class="margin">bb</div>

<div class="padding">aa</div>
<div class="padding">bb</div>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/cf5a58b2-a54e-53e4-d077-95228e93c5c4.png)


paddingであれば、divの間は、10px+10px=20px となる。
marginは相殺によってdivの間が、10pxしかあかない。

相殺を理解するには、要素を人に例えると、以下のような感じになる。

・widthは、骨格
・heightは、身長
・borderは、皮膚
・paddingは、脂肪
・marginは心の距離
みたいなw



入れ子での相殺

相殺は入れ子の状態でも、marginが重なれば発生する。
両方ともにmarginが設定された場合、相殺が発生する。

<style type="text/css">
  .parent{
    margin:10px 0;
  }
  .child {
    margin:30px 0;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/eda3abe9-7d3c-9787-54bd-38cadd37febe.png)


入れ子の別の例

<style type="text/css">
  .parent {
    margin:30px 0;
  }
  .child {
    margin:10px 0 40px;
  }
</style>

<div class="parent">
  <div class="child">demo</div>
</div>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/ded53420-0c85-f93c-d9a4-e6904c6ae7c7.png)

上記の例では、margin-topは、.parentの方が大きいので30pxが適用される。しかしmargin-bottomは、.childの方が値が大きいので40pxが適用されることになる。相殺が起こった場合は、大きい方の値が優先される。


相殺が起こらないケース

親の要素に特定のCSSを適用することで、子の相殺が発生しない。
・border（marginが指定されている方向）
・padding（marginが指定されている方向）
・overflow:hidden, scroll（auto, visibleは適用されない）
・position:absolute, fixed（relative, staticは適用されない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533731/24d0519c-8c60-5959-affb-6b881f311e41.png)

また、floatも調べたが、今回はここまでにしておこう。

ご清聴ありがとうございました。

引用先（参考先）：https://kojika17.com/2012/08/margin-of-css.html

引用させていただきました。この記事に勉強させていただきました。ありがとうございました。