SoyaBlog

これを見れば解決しそうや

HOME>CSS>外部の余白を設定するmarginについて解説
ブログ投稿日時:
ブログ更新日時:
外部の余白を設定するmarginについて解説

外部の余白を設定するmarginについて解説

  1. marginとは
  2. marginの指定方法
  3. 今回のまとめ

1.marginとは

marginとは、外部の余白を設定するプロパティです。

下記の画像のようなイメージで外部の余白を設定します。

marginの例

2.marginの指定方法

marginはまとめて指定したり、個別で指定したりなど様々な指定方法があるので、これは実際にCSSの表示で確認してみましょう。

marginをまとめて指定する

marginをまとめて指定したいときはmarginで指定しましょう。

marginの指定と表示は下記の通りです。

<div class="margin-01">全方向に同じpxを指定</div>

<div class="margin-02">全方向に個別で指定</div>

<div class="margin-03">margin: 上下 左右; で指定</div>

<div class="margin-04">margin: 上 左右 下; で指定</div>
div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 padding: 16px;
 height: 200px;
}

.margin-01 {
 /* 全方向に同じpxを指定 */ 
 margin: 30px;
}

.margin-02 {
 /* 全方向に個別で指定 */ 
 margin: 20px 30px 40px 50px;
}

.margin-03 {
 /* margin: 上下 左右; で指定 */
 margin: 30px 50px;
}

.margin-04 {
 /* margin: 上 左右 下; で指定 */
 margin: 20px 50px 30px;
}
HTMLとCSSの表示
全方向に同じpxを指定

今回はmargin: ◯px;で指定したので全方向に30pxのmarginが設定されました。

検証ツールで確認してみてください。

HTMLとCSSの表示
全方向に個別で指定

今回はmargin: ◯px ◯px ◯px ◯px;で指定したので上は20px、右は30px、下は40px、左は50pxのmarginが設定されました。

こちらも検証ツールで確認してみてください。

HTMLとCSSの表示
margin: 上下 左右; で指定

今回はmargin: 上下 左右;で指定したので上下は30px、左右には50pxのmarginが設定されました。

こちらも検証ツールで確認してみてください。

HTMLとCSSの表示
margin: 上 左右 下; で指定

今回はmargin: 上 左右 下;で指定したので上は20px、左右には50px、下は30pxのmarginが設定されました。

こちらも検証ツールで確認してみてください。

指定した方向だけmarginを指定する

marginを指定した方向だけに設定したい場合は下記の4つを使って指定します。

・ margin-top (上だけに指定)

・ margin-right (右だけに指定)

・ margin-bottom (下だけに指定)

・ margin-left (左だけに指定)

marginの指定と表示は下記の通りです。

<div class="margin-top">marginを上だけ指定</div>

<div class="margin-right">marginを右だけ指定</div>

<div class="margin-bottom">marginを下だけ指定</div>

<div class="margin-left">marginを左だけ指定</div>
div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 height: 200px;
}

.margin-top {
 margin-top: 30px;
}

.margin-right {
 margin-right: 30px;
}

.margin-bottom {
 margin-bottom: 30px;
}

.margin-left {
 margin-left: 30px;
}
HTMLとCSSの表示
marginを上だけ指定
HTMLとCSSの表示
marginを右だけ指定
HTMLとCSSの表示
marginを下だけ指定
HTMLとCSSの表示
marginを左だけ指定

今回は「margin-方向」で指定した方向だけに30pxのmarginが設定されました。

marginで左寄せ、中央揃え、右寄せ

marginを指定した方向に寄せたいときはautoを使用して指定した方向に寄せることができます。

marginの指定と表示は下記の通りです。

<div class="margin-left-alignment">marginで左寄せ</div>

<div class="margin-centered">marginで中央揃え</div>

<div class="margin-right-alignment">marginで右寄せ</div>
div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 height: 200px;
 width: 50%;
 padding: 16px;
 background-color: red;
}

.margin-left-alignment {
 margin-right: auto;
}

.margin-centered {
 margin-right: auto;
 margin-left: auto;

 /* margin: 0 auto; */
}

.margin-right-alignment {
 margin-left: auto;
}
HTMLとCSSの表示
marginで左寄せ
HTMLとCSSの表示
marginで中央揃え
HTMLとCSSの表示
marginで右寄せ

今回はautoを使って指定した方向に寄せることができました。

特に中央寄せはよく使うので覚えておくと良いかもです。

3.今回のまとめ

この記事ではmarginについて解説しました。

marginとは、外部の余白を設定するプロパティです。

marginはまとめて指定したり、個別で指定したりなど様々な指定方法があるので、忘れてしまった場合はこのブログを見に来てください。

最後までお読みいただきありがとうございます。