この記事は【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を指定
テキスト
PR
ニッチなテーマのイラスト素材を投稿中！ぜひご利用ください。
ナマケモノなど可愛いイラストをイラストACで無料配布中！
オリジナル絵本をKindleで出版！
ナマケモノのふにゃまるちゃんを読む困ったときは格安で依頼！RU DESIGNも出品中
格安レンタルサーバーでサイト運営を始めよう
ドメイン取得は一括管理が便利！
応援・支援よろしくお願いします！サイト運営に活用させていただきます。
Braveクリエイターサポート
関連記事
