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を指定
テキスト
