Vuetifyとは
VuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできるUIライブラリです。
※Vuetify
実際に私もよく使っていて、とても気に入っています。
Vuetifyの書き方は少し特殊なので慣れるまではちょっとややこしいかもしれませんが、慣れるとパパッとUIの実装ができるのでオススメです
本題
本題のmarginやpaddingの設定ですが、
実際どんな感じで書くのかというと、こんな感じ。
<div class="my-5" />
property
感の鋭い方はもうお分かりかもしれませんが、
最初の「m」はmarginの「m」です。
paddingの場合は「p」と書きます。
それだけです。
direction
そして、次の「y」という文字。
これはy軸方向の「y」という意味です。
つまり上下を対象に適用させるということです。
となると、「x」は左右を対象とします。
他にも、
・「t」 Top
・「b」 Bottom
・「l」 Left
・「r」 Right
・「a」 全方向
などがあります。
size
最後の「5」という数字、これはsizeを表すもので、
「1」が4pxを表しています。
なので「5」の場合は5×4で20pxです。
つまり「my-5」は
上下にマージンを20px適用するという意味になります！
ネガティブ margin・padding
そして個人的にめっちゃイイ！と思ったのが、
ネガティブ（マイナス）な値も設定できるという点です
ネガティブを設定するには、
size（数字の部分）の前に、「n」を追加します。
なので「my-n5」と書くと、
上下にネガティブマージンを20px適用するという意味になります。
最後に
Vuetifyを使うと直接タグ内に書けるので、
わざわざCSSをstyleに分けて書かなくて済みますし、
コード量も肥大化しにくく且つ、開発スピードも上がるのでメリットは大きいかと思います
また今回紹介したmarginとpadding以外にもたくさんの機能があるので、他の機能も是非見てみてください。
ある程度のことはVuetifyで再現できるかと思います。
※Vuetify