Vue3整合Tailwindcss之margin样式类

margin 样式类

基础样式

基础样式总结

m-1 到 m-96，设置四个方向的外边距，数字越大，内边距越大。

mx-1 到 mx-96，设置水平方向的外边距，数字越大，内边距越大。

my-1 到 my-96，设置垂直方向的外边距，数字越大，内边距越大。

数字间隔：

• 1-12是连续的
• 12-52是间隔2
• 52到64间隔4
• 64以后间隔8

关键字：

• m：四个方向
• mx：水平方向
• my：垂直方向
• mt：上边
• mr：右边
• mb：下边
• ml：左边

案例：设置四个方向的外边距

需求：在一行展示四个盒子，并给每个盒子分别设置四个方向上的外边距，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex bg-indigo-50 p-8 gap-4">
    <div class="mt-12 h-32 bg-indigo-500 flex justify-center items-center font-bold text-3xl text-white flex-1 rounded">1</div>
    <div class="mr-12 h-32 bg-indigo-500 flex justify-center items-center font-bold text-3xl text-white flex-1 rounded">2</div>
    <div class="mb-12 h-32 bg-indigo-500 flex justify-center items-center font-bold text-3xl text-white flex-1 rounded">3</div>
    <div class="ml-12 h-32 bg-indigo-500 flex justify-center items-center font-bold text-3xl text-white flex-1 rounded">4</div>
  </div>
</template>

案例：设置水平和垂直外边距

需求：在一行设置两个盒子，分别给这两个盒子设置水平方向和垂直方向的外边距，然后观察其效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex bg-indigo-50 p-8 gap-4">
    <div class="h-32 bg-indigo-500 flex-1 mx-12">1</div>
    <div class="h-32 bg-indigo-500 flex-1 my-12">2</div>
  </div>
</template>

案例：设置四个方向的外边距

需求：在一行显示三个盒子，分别用三种方式给这三个盒子设置四个方向的外边距，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex bg-indigo-50 p-8 gap-4">
    <div class="flex-1 h-32 bg-indigo-500 mt-12 mr-12 mb-12 ml-12"></div>
    <div class="flex-1 h-32 bg-indigo-500 mx-12 my-12"></div>
    <div class="flex-1 h-32 bg-indigo-500 m-12"></div>
  </div>
</template>

案例：外边距可以是负数

需求：在一行显示两个盒子。分别设置四个方向的正数外边距和负数外边距，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex bg-indigo-50 p-8 gap-4">
    <div class="flex-1 h-32 bg-indigo-500 m-12"></div>
    <div class="flex-1 h-32 bg-indigo-500 -m-12"></div>
  </div>
</template>