05边白与边框

# 边白与边框

# 知识点

熟悉Tailwind CSS框架中边白与边框的使用方法

# 官网

https://tailwindcss.com/docs/padding https://tailwindcss.com/docs/margin

# 实战演习

<!-- 原始 -->
<div class="bg-blue-200">
    <div class="bg-gray-600 text-gray-100 w-60">1.网站标题</div>
    <div class="bg-red-600 text-gray-100 w-60">2.网站标题</div>
    <div class="bg-yellow-600 text-gray-100 w-60">3.网站标题</div>
    <div class="bg-green-600 text-gray-100 w-60 text-right">4.网站标题</div>
    <div class="bg-blue-600 text-gray-100 w-60">5.网站标题</div>
    <div class="bg-purple-600 text-gray-100 w-60">6.网站标题</div>
    <div class="bg-pink-600 text-gray-100 w-60">7.网站标题</div>
</div>
<hr class="border-8 border-white" />
<!-- padding -->
<div class="bg-gray-200">
    <!-- p-10 -->
    <div class="bg-gray-600 text-gray-100 w-60">1.网站标题</div>
    <!-- pt-10 -->
    <div class="bg-red-600 text-gray-100 w-60">2.网站标题</div>
    <!-- pl-10 -->
    <div class="bg-yellow-600 text-gray-100 w-60">3.网站标题</div>
    <!-- pr-10 -->
    <div class="bg-green-600 text-gray-100 w-60 text-right">4.网站标题</div>
    <!-- px-10 -->
    <div class="bg-blue-600 text-gray-100 w-60">5.网站标题</div>
    <!-- py-10 -->
    <div class="bg-purple-600 text-gray-100 w-60">6.网站标题</div>
    <div class="bg-pink-600 text-gray-100 w-60">7.网站标题</div>
</div>
<hr class="border-8 border-white" />
<!-- margin -->
<div class="bg-green-200">
    <!-- m-10 -->
    <div class="bg-gray-600 text-gray-100 w-60">1.网站标题</div>
    <!-- mt-10 -->
    <div class="bg-red-600 text-gray-100 w-60">2.网站标题</div>
    <!-- ml-10 -->
    <div class="bg-yellow-600 text-gray-100 w-60">3.网站标题</div>
    <!-- mr-10 -->
    <div class="bg-green-600 text-gray-100 w-60 text-right">4.网站标题</div>
    <!-- mx-10 -->
    <div class="bg-blue-600 text-gray-100 w-60">5.网站标题</div>
    <!-- my-10 -->
    <div class="bg-purple-600 text-gray-100 w-60">6.网站标题</div>
    <div class="bg-pink-600 text-gray-100 w-60">7.网站标题</div>
</div>
<hr class="border-8 border-white" />
<!-- border -->
<div class="bg-yellow-200">
    <!-- border-4 -->
    <div class="bg-gray-600 text-gray-100 w-60 h-12">1.网站标题</div>
    <!-- border-4 border-dotted -->
    <div class="bg-red-600 text-gray-100 w-60 h-12">2.网站标题</div>
    <!-- border-b-4 border-red-500 -->
    <div class="bg-yellow-600 text-gray-100 w-60 h-12">3.网站标题</div>
    <!-- text-right border-r-8 border-green-500 -->
    <div class="bg-green-600 text-gray-100 w-60 h-12">4.网站标题</div>
    <!-- border-l-8 border-yellow-500 -->
    <div class="bg-blue-600 text-gray-100 w-60 h-12">5.网站标题</div>
    <div class="bg-purple-600 text-gray-100 w-60 h-12">6.网站标题</div>
    <div class="bg-pink-600 text-gray-100 w-60 h-12">7.网站标题</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 课程文件

https://github.com/komavideo/LearnTailwindCSS

# 小马视频频道

http://komavideo.com

# 小马部落

https://discord.gg/VSKw72P

编辑

上次更新: 2023/08/06, 00:38:41

← 04各种字号一起看 06定制自己的Tailwind CSS→