【初心者の方向け】 Bootstrap4の使い方 余白

bootstrapでの余白paddingとmarginの指定に方法について。

Bootstrap4のバージョン4.3をベースに書いています。

paddingとmarginについて

基本的なhtmlやcssを理解した上でのbootstrapについての内容になっていますが、あらためて余白について説明します。

要素（ボックス）に対して内側の余白を指定しているのがpaddingで、外側の余白を指定するのがmarginとなります。

余白部分の指定は、どちらも上下左右に指定する事ができます。

また、上下・左右といった形で任意の方向に対して余白を指定する事もできます。

bootstrapでのマージンとパディングの指定方法

.m（margin）.p（padding）とブレークポイントや余白のサイズで指定する事ができます。

ブレークポイントに関しては省略する事ができます。

.m-ブレークポイント-余白サイズ

または

.m-余白サイズ

まず各方向への余白の指定方法は以下のようになります。

margin（マージン）の指定

padding(パディング)の指定

ブレークポイントや余白サイズは以下を指定していきます。

・ブレークポイント

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 -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。