Vue3整合Tailwindcss之padding样式类_vue3 el-tabs 使用tailwind调整导航标签内边距

04 常用基础样式

padding 样式类

什么是内边距

基础样式

基础样式类总结

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

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

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

数字间隔：

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

关键字：

• p：四个方向
• px：水平方向
• py：垂直方向
• pt：上边
• pr：右边
• pb：下边
• pl：左边

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

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

vue3示例：

<script setup>
</script>
<template>
  <div class="flex gap-4 py-8 bg-indigo-50">
    <div class="pt-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">1</div>
    <div class="pr-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">2</div>
    <div class="pb-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">3</div>
    <div class="pl-12 box-border bg-indigo-500 flex-1 h-32 rounded flex justify-center items-center font-bold text-3xl text-white">4</div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11

案例：设置水平方向和垂直方向的内边距

需求：在一行显示两个盒子，分别设置水平方向和垂直方向的内边距，观察效果。

vue3示例：

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

1
2
3
4
5
6
7
8
9