この記事は【2019年3月25日】が最後の更新のため、記事の内容が古い可能性があります。
bootstrapでの余白paddingとmarginの指定に方法について。
Bootstrap4のバージョン4.3をベースに書いています。
paddingとmarginについて
基本的なhtmlやcssを理解した上でのbootstrapについての内容になっていますが、あらためて余白について説明します。
要素（ボックス）に対して内側の余白を指定しているのがpaddingで、外側の余白を指定するのがmarginとなります。
余白部分の指定は、どちらも上下左右に指定する事ができます。
また、上下・左右といった形で任意の方向に対して余白を指定する事もできます。
bootstrapでのマージンとパディングの指定方法
.m（margin）.p（padding）とブレークポイントや余白のサイズで指定する事ができます。
ブレークポイントに関しては省略する事ができます。
.m-ブレークポイント-余白サイズ
または
.m-余白サイズ
まず各方向への余白の指定方法は以下のようになります。
margin（マージン）の指定
| .m | 上下左右にマージン |
|---|---|
| .mt | 上にマージン |
| .mb | 下にマージン |
| .ml | 左にマージン |
| .mr | 右にマージン |
| .my | 上下にマージン |
| .mx | 左右にマージン |
padding(パディング)の指定
| .p | 上下左右にパディング |
|---|---|
| .pt | 上にパディング |
| .pb | 下にパディング |
| .pl | 左にパディング |
| .pr | 右にパディング |
| .py | 上下にパディング |
| .px | 左右にパディング |
ブレークポイントや余白サイズは以下を指定していきます。
・ブレークポイント
sm ・・・幅576px以下
md・・・幅768px以下
lg・・・幅992px以下
xl・・・幅1200px以上
・余白サイズ
0・・・0rem
1・・・0.25rem
2・・・0.5rem
3・・・1rem
4・・・1.5rem
5・・・3rem
auto・・・auto
rem（root em）はルート要素(html)に指定したフォントサイズに対して倍率となります。
htmlに何も指定していなければ、フォントサイズは16pxになりますので
1rem=16px 0.5rem=8pxとなります。
マージンとパディングと使用した例
実際にマージンやパディングを指定した時の表示をご確認ください。
.pl-2を指定
テキスト
.pl-5を指定
テキスト
.ml-2を指定
テキスト
.ml-5を指定
テキスト
ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」
オリジナル絵本 Kindleにて出版
ナマケモノのふにゃまるちゃん
ドメイン取得は同じところで取得しておくと便利ですよ。
応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。 ■BTC 1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ ■MATIC 0xC75744667A7396DFF507cf44371A2CF0B6eEF03B ■ETH 0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
関連記事
