marginとは?スペースを作るcssプロパティについての説明

こんにちは tanaka です。

cssプロパティ
margin の説明です。

margin は
ボックスモデルの最外へ
スペースを作るために使います。

画像blog-css-list01-01

(指定できる値)
 ・px
 ・em
  など

結構な頻度で
トラブルを起こす
プロパティでもあります。

なぜトラブルが多いのでしょうか、

それは、
上下の方向に並んだ
ボックスモデルを整頓させる

margin相殺という
機能がついてるためです。

その機能が
思わぬところで
トラブルを起こします。

そして、
marginには、初期値に0でない
数字が入っているので

*{
margin: 0;
}
を入れておくと良いでしょう。

もちろん
辺の指定もできます。

上下だけ、
左右だけ
スペースを入れたいときに
使えます。

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

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

marginの説明

marginとは

marginは
ボックスモデルの最外へ
スペースを作るために使います。

画像blog-css-list01-01

marginは
結構な頻度で
トラブルを引き起こします。

それは、
上下の方向に並んだ
ボックスモデルを整頓させる

margin相殺という
機能がついてるためです。

margin相殺という機能は、
思わぬところで
空白を作ったり、

入れた数値と
違う結果になったりと

とても
厄介な機能でもあります。

しかし、
どのようなものか、
先に知っておけば

対処もしやすくなるでしょう。

そんな、
margin相殺の
記事を用意しました。
よければご覧ください。

そして、
marginは、初期値に0ではない
数字が入っているので

*{
margin: 0;
}
を入れておくと良いでしょう。

値の指定方法

指定方法は、4つあります。

1:全周

2:上下左右

3:左右

4:

1:全周

margin: 30px;
全周に30pxのスペースを作ります。

2:上下 左右

margin: 10px 30px;
 上下 = 10px
 左右 = 30px
のスペースを作ります。

3:上 左右 下

margin: 10px 20px 30px;
 上  = 10px
 左右 = 20px
 下  = 30px
のスペースを作ります。

4:上 右 下 左

margin: 10px 20px 30px 40px;
 上 = 10px
 右 = 20px
 下 = 30px
 左 = 40px
のスペースを作ります。

指定の順番は
margin: 1 2 3 4;

 1左上 → 2右上
        ↓
 4左下 ← 3右下
左上スタートの時計回りです。

それぞれ辺のプロパティもある

それぞれ個別で
辺の指定もできます。

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

まとめ

marginとは

margin は
ボックスモデルの最外へ
スペースを作るために使う。

画像blog-css-list01-01

(指定できる値)
 ・px
 ・em
  など

margin相殺

margin は
margin相殺という
厄介な機能がるので

知っておくと対処しやすい

詳しくは、
下の記事をご覧ください。

指定方法は4つ

指定方法は、4つ

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

(全周)
(上下) (左右)
(上)  (左右) (下)
(上)  (右)  (下) (左)

辺の指定もできる

それぞれ個別で
辺の指定もできる。

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

以上、
margin
の話でした。

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

タイトルとURLをコピーしました