1. TOP
  2. >技術メモ>
  3. 【初心者の方向け】 Bootstrap4の使い方 余白

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

技術メモ, Bootstrap4

2019/03/25
【初心者の方向け】 Bootstrap4の使い方 余白

この記事は【2019年3月25日】が最後の更新のため、記事の内容が古い可能性があります。

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

 

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

 

 

paddingとmarginについて

 

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

 

 

 

marginとpaddingでの余白指定

要素(ボックス)に対して内側の余白を指定しているのが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
ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。

関連記事

ワードプレス、管理画面の投稿一覧に最終更新日のカラムを追加
2022/09/17
ワードプレスの管理画面の投稿一覧に、最終更新日を表示させる方法です。 記事によっては何度もリライトを繰り返す場合もあります。特定の記事であれば、検索で探したり該...
WordPress管理画面 プラグインなしでカスタムフィールドを検索に含める。
2022/09/09
Wordpressの管理画面にある投稿一覧のワード検索にて、カスタムフィールドの内容をを含める方法です。カスタムフィールドを修正したいけど、記事が大量にあったり...
【WP】ワードプレスで特定のカテゴリーやアーカイブの並び順を変更する方法
2022/09/03
ワードプレスのアーカイブやカテゴリーページで、特定のカテゴリーのみ並び順を変更したい場合のやり方です。 <?php query_posts($query_...
【WP】カスタムフィールドの年月日を置き換えて日付の差分を計算
2022/08/24
ブログなどで「この記事は○年前の内容です」など表示されるのを見かけたことはありませんか? 技術や情報系の記事では、最新の情報では無いと現在では役に立たないことも...
【ワードプレス】メインループの投稿並び順を自由に変更する
2022/08/08
ワードプレスのカテゴリ一覧などを任意に並び替えて表示。最終更新日を最初に表示させたい時など状況によって表示順を変えたい時の方法です。 デフォルトでは投稿日が新し...