2020.08.26目次bootstrap4でmargin・paddingをサッと指定する方法マージン(margin)をつけたい上下左右にマージンをつける上下左右のいずれかにマージンをつける上下にマージンをつける(my-*)左右にマージンをつける(mx-*)上下左右の自動マージン(m-auto)パディング(padding)をつけたい上下左右にパディングをつける上下左右のいずれかにパディングをつける上下にマージンをつける(py-*)左右にマージンをつける(px-*)まとめbootstrap4でmargin・paddingをサッと指定する方法bootstrap4でマージン(margin)・パディング(padding)を調整するクラスについて書いています。公式のspacingの内容になります。マージン(margin)をつけたい下記で記載している内容をcodepenで試してみました。CodePen.上下左右にマージンをつけるm-[数値]クラスを使用すると、マージンをつけることができます。[数値]rem;がクラスを指定した要素に設定されます。3rem上下左右のいずれかにマージンをつけるmの後にt(top),r(right),b(bottom),l(left)と続けることで下記の意味になります。3rem上下にマージンをつける(my-*)my-[数値]を指定すると、上下にマージンが設定されます。設定されるマージンは上記表の余白サイズと同じです。左右にマージンをつける(mx-*)mx-[数値]を指定すると、左右にマージンが設定されます。設定されるマージンは上記表の余白サイズと同じです。上下左右の自動マージン(m-auto)m-autoというクラスもありますが、これがmargin:autoになります。パディング(padding)をつけたいマージンと同じようにpを使うことでパディングを設定できます。上下左右にパディングをつけるp-[数値]クラスを使用すると、パディングをつけることができます。[数値]rem;がクラスを指定した要素に設定されます。3rem上下左右のいずれかにパディングをつけるpの後にt(top),r(right),b(bottom),l(left)と続けることで下記の意味になります。3rem上下にマージンをつける(py-*)py-[数値]を指定すると、上下にパディングが設定されます。設定されるパディングは上記表の余白サイズと同じです。左右にマージンをつける(px-*)px-[数値]を指定すると、左右にパディングが設定されます。設定されるパディングは上記表の余白サイズと同じです。まとめマージンはm(t,r,b,l)-[数値]で、パディングはp(t,r,b,l)-[数値]でつけることができました。指定される数値は0-3remでした。クラスを独自で作っている場合は、そこで付けることになると思いますが、テストページを作るときや、個別にちょっと指定したい時など、パパッとマージンやパディングを指定して調整するときは便利なのでオススメです。html&cssWebシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクhtml&cssHTML/CSSの学習におすすめの本3選!【エンジニア選定】HTML/CSSの学習におすすめの本を3つ紹介しています。最初にHTML/CSSについて簡単に説明して、その後におすすめの本を紹介しました。最後にHTML/CSSを「どの本で学ぶのが良いか」の考察をまとめています。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。