ブロックの外側の間隔を指定する。

ブロックの外側なので width の計算幅には入らない。

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

一気に書ける

margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px 40px;

全方向同一値、上下と左右、上右下左

割合指定することで親の横幅に対してどのぐらいというのを指定できる。 注意しないといけいないのは left や right だけでなく top や bottom に対しても「横幅」基準で margin が決定されるということ。縦幅基準ではない。

通常の margin は他のブロックを遠ざけるような挙動。

しかしこのパラメータはマイナス値も指定することができて、 これをやると隣接するブロックをブロック内部へ領域を超えて吸い込むような動きになる。

これにより transform や position relative でズラした空間を埋めたりできる。

幅が指定されているブロックに対して

margin: 0 auto;

このように左右に auto を入れると、その親に対してブロックがセンタリングして配置される。