Boostrapでマージン(margin)とパディング(Paddning)を指定する方法

Boostrapでのマージン(margin)とパディング(Paddning)の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン(margin)とパディング(Paddning)が設定できます。

スポンサーリンク

Boostrapでのマージン(margin)とパディング(Paddning)の指定

Boostrapではマージン(margin)とパディング(Paddning)に関するクラスが以下のように設定されています。

マージン(margin)
  • mt(上マージン)
  • mb(下マージン)
  • ml(左マージン)
  • mr(右マージン)
  • mx(左右マージン)
  • my(上下マージン)
  • m(上下左右マージン)
パディング(paddning)
  • pt(上パディング)
  • pb(下パディング)
  • pl(左パディング)
  • pr(右パディング)
  • px(左右パディング)
  • py(上下パディング)
  • p(上下左右パディング)

覚え方は「margin」は「m」、「Paddning」は「p」と「Top(上)」は「t」、「Bottom(下)」は「b」、「Right(右)」は「r」、「Left(左)」は「l」、「X軸(左右)」は「x」、「Y軸(上下)」は「y」を組み合わせて設定します。

実際にはマージン(margin)、パディング(paddning)は以下に定義されている大きさと組み合わせて指定します。

マージン(margin)の大きさ
  • 0(margin:0)
  • 1(margin:0.25rem)
  • 2(margin:0.5rem)
  • 3(margin:1rem)
  • 4(margin:1.5rem)
  • 5(margin:3rem)
  • auto(margin:auto)
パディング(paddning)の大きさ
  • 0(padding:0)
  • 1(padding:0.25rem)
  • 2(padding:0.5rem)
  • 3(padding:1rem)
  • 4(padding:1.5rem)
  • 5(padding:3rem)
  • auto(padding:auto)

以下が実際の指定のサンプルです。
(Sapmle)

以上、Boostrapでマージン(margin)とパディング(Paddning)を指定する方法でした。

Bootstrap
スポンサーリンク
色白おばけをフォローする

おすすめプログラミングスクール

「侍エンジニア塾」は、未経験者でも結果が出せるプログラミング学習サービスです。
専属のインストラクターとの対面かSkypeでのレッスンを通じてプログラミングスキルを身につけて頂き、就職や転職までサポートします。
「侍エンジニア塾」の『3つ』の大きな特徴

  1. 完全マンツーマンレッスン
  2. フルオーダーメイドカリキュラム作成
  3. 独立・起業・フリーランス支援

誰もが自分の技術で稼げる人材になるための教育プログラム
TECH::EXPERTのこだわりは「実務的な教育コンテンツ」と「徹底したサポート体制」の2つです。

  1. 現場で使える実践的な技術が身につく
    有名企業のエンジニアへヒアリングを重ね、1年かけて創り上げた教育プログラムがあなたを実務レベルの即戦力エンジニアへ高めます
  2. 学習方法はライフスタイルに合わせて学べます
    ・一気にエンジニアへ駆け上がる「短期集中スタイル」
    ・無理なく確実にエンジニアへ「週末集中スタイル」
    ・自分のペースで自由に学ぶ「オンラインスタイル」

TECH::CAMP(エンジニアスクール)。
【Webアプリケーションコース】
全くの未経験からWebアプリケーション開発に必要なスキルを全て学ぶことができます。
【iPhoneアプリコース】
全くの未経験から最新の開発言語Swiftを用いてiPhoneアプリ開発を学ぶことができます。
自分だけのiPhoneアプリつくって世界に向けてリリースしたい方には自信を持っておすすめできる内容です。

ソフトウェア開発日記
タイトルとURLをコピーしました