対象者
- bootstrapでマージンとパディングを使いたい方
- 簡単に行や文字の間に空白を空けたい方
目的
- bootstrapを使用して,marginとpaddingをview上で設定する
実際の手順と実例
1.前提
bootstrapの使用例はこちら
2.marginかpaddingかを設定
bootstrapを導入するとHTMLの各要素のクラスに「m」や「p」と数字を組み合わせて幅を調整できます。
- m : margin
- p : padding
例
<div class="m-5">クラスを指定するとマージンがつきます</div>
<div class="p-5">クラスを指定するとパディングがつきます</div>
3.上下左右を設定する
| 上下左右の指定 | 内容 |
|---|---|
| t | top |
| b | bottom |
| l | left |
| r | right |
| x | leftとrightをセット |
| y | topとbottomセット |
<div class="m-0">クラスを指定するとサイズ「0」のマージンがつきます</div>
<div class="p-1">クラスを指定するとサイズ「1」のパディングがつきます</div>
<div class="m-2">クラスを指定するとサイズ「2」のマージンがつきます</div>
<div class="p-3">クラスを指定するとサイズ「3」のパディングがつきます</div>
<div class="m-4">クラスを指定するとサイズ「4」のマージンがつきます</div>
<div class="p-5">クラスを指定するとサイズ「5」のパディングがつきます</div>
<div class="m-auto">クラスを指定すると「auto」のマージンがつきます</div>
投稿者コメント
一回見ればわかりやすいのですが、自分で理解するのにまとめてみました。覚えるとかなり楽に行間調整が可能です!
My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。