Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPadding_margin_border.htm
More file actions
Latest commit
149 lines (143 loc) · 40 KB
/
Copy pathPadding_margin_border.htm
File metadata and controls
149 lines (143 loc) · 40 KB
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html><htmllang="en"><head><metacharSet="utf-8"/><metaname="viewport" content="width=device-width, initial-scale=1"/><linkrel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><linkrel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><scriptsrc="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><scriptsrc="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><scriptsrc="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><scriptsrc="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><scriptsrc="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><scriptsrc="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><scriptsrc="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><metaname="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - Padding, Margin và Border</title><metaname="description" content="# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border
## 1. **Padding** – Khoảng cách bên trong
Thuộc tính `padding` được sử dụng để tạo khoảng cách gi..."/><metaproperty="og:title" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><metaproperty="og:description" content="# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border
## 1. **Padding** – Khoảng cách bên trong
Thuộc tính `padding` được sử dụng để tạo khoảng cách gi..."/><metaproperty="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><metaproperty="og:image:alt" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><metaproperty="og:type" content="article"/><metaproperty="article:published_time" content="2024-12-10T08:13:47.552Z"/><metaproperty="article:author" content="zunohoang"/><metaname="twitter:card" content="summary_large_image"/><metaname="twitter:title" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><metaname="twitter:description" content="# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border
## 1. **Padding** – Khoảng cách bên trong
Thuộc tính `padding` được sử dụng để tạo khoảng cách gi..."/><metaname="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><metaname="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><scriptsrc="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><bodyclass="__variable_1e4310 __variable_c3aa02 antialiased"><mainclass="container mx-auto px-4 pt-2 py-8"><headerclass="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Padding, Margin và Border</h1><pclass="text-gray-600">Đăng bởi <i>zunohoang</i> vào <timedateTime="2024-12-10T08:13:47.552Z">12/10/2024</time></p></div><p>👁️ <!-- -->41<!-- --> lượt xem</p></header><article><divclass="markdown-body bg-white p-6 rounded-lg"><h1class="text-3xl font-bold mb-4 pb-2 border-b">Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border</h1>
<h2class="text-2xl font-bold mt-6 mb-4">1. <strong>Padding</strong> – Khoảng cách bên trong</h2>
<pclass="mb-4">Thuộc tính <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code> được sử dụng để tạo khoảng cách giữa nội dung bên trong phần tử (chữ, hình ảnh, v.v.) và viền của phần tử.</p>
<h3class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code>:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code>: Tạo khoảng cách đồng đều ở tất cả các cạnh.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding-top</code>: Khoảng cách giữa nội dung và viền phía trên.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding-right</code>: Khoảng cách giữa nội dung và viền phía bên phải.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding-bottom</code>: Khoảng cách giữa nội dung và viền phía dưới.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding-left</code>: Khoảng cách giữa nội dung và viền phía bên trái.</li>
</ul>
<h3class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><divstyle="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><codeclass="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><spanclass="token" style="color:#6a9955">/* Padding đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">20</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><spanclass="token" style="color:#6a9955">/* Padding cho từng cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding-top</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">10</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding-right</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">15</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding-bottom</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">20</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding-left</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">25</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code> giúp tạo không gian giữa nội dung của phần tử và viền, giúp cải thiện tính thẩm mỹ và dễ đọc cho nội dung bên trong.</li>
</ul>
<hr/>
<h2class="text-2xl font-bold mt-6 mb-4">2. <strong>Margin</strong> – Khoảng cách bên ngoài</h2>
<pclass="mb-4">Thuộc tính <codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code> dùng để tạo khoảng cách giữa phần tử và các phần tử xung quanh nó.</p>
<h3class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code>:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code>: Tạo khoảng cách đồng đều cho tất cả các cạnh.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin-top</code>: Khoảng cách giữa phần tử và phần tử phía trên.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin-right</code>: Khoảng cách giữa phần tử và phần tử bên phải.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin-bottom</code>: Khoảng cách giữa phần tử và phần tử phía dưới.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin-left</code>: Khoảng cách giữa phần tử và phần tử bên trái.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">auto</code>: Dùng để tự động căn giữa phần tử, thường sử dụng trong các phần tử block (ví dụ: <codeclass="bg-gray-100 rounded px-1 py-0.5">margin-left: auto; margin-right: auto;</code>).</li>
</ul>
<h3class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><divstyle="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><codeclass="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><spanclass="token" style="color:#6a9955">/* Margin đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">20</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><spanclass="token" style="color:#6a9955">/* Margin cho từng cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-top</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">10</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-right</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">15</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-bottom</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">20</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-left</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">25</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><spanclass="token" style="color:#6a9955">/* Căn giữa phần tử */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">width</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">50</span><spanclass="token" style="color:#b5cea8">%</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-left</span><spanclass="token" style="color:#d4d4d4">:</span><span> auto</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin-right</span><spanclass="token" style="color:#d4d4d4">:</span><span> auto</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code> được sử dụng để tạo không gian giữa phần tử và các phần tử khác trên trang. Nó cũng giúp căn chỉnh phần tử trong một trang hoặc một container.</li>
</ul>
<hr/>
<h2class="text-2xl font-bold mt-6 mb-4">3. <strong>Border</strong> – Viền</h2>
<pclass="mb-4">Thuộc tính <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code> dùng để tạo viền bao quanh phần tử. Nó bao gồm các thuộc tính con cho việc thiết lập màu sắc, kiểu và độ rộng của viền.</p>
<h3class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code>:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border</code>: Tạo viền cho tất cả các cạnh của phần tử (kết hợp giữa độ rộng, kiểu và màu sắc của viền).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-width</code>: Độ rộng của viền.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-style</code>: Kiểu của viền (ví dụ: <codeclass="bg-gray-100 rounded px-1 py-0.5">solid</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">dashed</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">dotted</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">double</code>, v.v.).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-color</code>: Màu sắc của viền.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-top</code>: Viền phía trên của phần tử (bao gồm <codeclass="bg-gray-100 rounded px-1 py-0.5">border-top-width</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-top-style</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-top-color</code>).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-right</code>: Viền phía bên phải của phần tử (bao gồm <codeclass="bg-gray-100 rounded px-1 py-0.5">border-right-width</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-right-style</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-right-color</code>).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-bottom</code>: Viền phía dưới của phần tử (bao gồm <codeclass="bg-gray-100 rounded px-1 py-0.5">border-bottom-width</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-bottom-style</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-bottom-color</code>).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-left</code>: Viền phía bên trái của phần tử (bao gồm <codeclass="bg-gray-100 rounded px-1 py-0.5">border-left-width</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-left-style</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-left-color</code>).</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-radius</code>: Để bo góc cho viền.</li>
</ul>
<h3class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><divstyle="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><codeclass="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><spanclass="token" style="color:#6a9955">/* Viền đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">2</span><spanclass="token" style="color:#b5cea8">px</span><span> solid </span><spanclass="token hexcode color">#3498db</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><spanclass="token" style="color:#6a9955">/* Viền cho từng cạnh */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-top</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">3</span><spanclass="token" style="color:#b5cea8">px</span><span> dashed </span><spanclass="token color">red</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-right</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">2</span><spanclass="token" style="color:#b5cea8">px</span><span> solid </span><spanclass="token color">blue</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-bottom</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">1</span><spanclass="token" style="color:#b5cea8">px</span><span> dotted </span><spanclass="token color">green</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-left</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">4</span><spanclass="token" style="color:#b5cea8">px</span><span> double </span><spanclass="token color">black</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><spanclass="token" style="color:#6a9955">/* Bo góc cho viền */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-radius</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">10</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border</code> giúp tạo viền bao quanh phần tử, có thể thay đổi màu sắc, độ rộng và kiểu dáng để làm nổi bật hoặc tạo hiệu ứng cho phần tử.</li>
<liclass="mb-1"><codeclass="bg-gray-100 rounded px-1 py-0.5">border-radius</code> tạo góc bo tròn cho viền phần tử, giúp giao diện trang web mềm mại hơn.</li>
</ul>
<hr/>
<h2class="text-2xl font-bold mt-6 mb-4">4. <strong>Thuộc Tính Kết Hợp</strong></h2>
<h3class="text-xl font-bold mt-5 mb-3">Ví dụ về sử dụng kết hợp <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code>, <codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code> và <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code>:</h3>
<pre><divstyle="color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto;background:#1e1e1e"><codeclass="language-css" style="white-space:pre;color:#ce9178;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><spanclass="token" style="color:#6a9955">/* Tạo không gian và viền cho phần tử */</span><span>
</span><span></span><spanclass="token" style="color:#d7ba7d">div</span><span></span><spanclass="token" style="color:#d4d4d4">{</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">padding</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">20</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">margin</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">30</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">2</span><spanclass="token" style="color:#b5cea8">px</span><span> solid </span><spanclass="token hexcode color">#3498db</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#9cdcfe">border-radius</span><spanclass="token" style="color:#d4d4d4">:</span><span></span><spanclass="token" style="color:#b5cea8">8</span><spanclass="token" style="color:#b5cea8">px</span><spanclass="token" style="color:#d4d4d4">;</span><span>
</span><span></span><spanclass="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3class="text-xl font-bold mt-5 mb-3">Giải thích:</h3>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1">Phần tử này có 20px padding ở bên trong, 30px margin ở bên ngoài, viền 2px màu xanh dương và góc bo tròn 8px.</li>
</ul>
<hr/>
<h2class="text-2xl font-bold mt-6 mb-4">5. <strong>Tóm Tắt</strong></h2>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1"><strong>Padding</strong>: Khoảng cách giữa nội dung và viền của phần tử.</li>
<liclass="mb-1"><strong>Margin</strong>: Khoảng cách giữa phần tử và các phần tử khác.</li>
<liclass="mb-1"><strong>Border</strong>: Viền bao quanh phần tử, có thể thay đổi độ rộng, kiểu dáng và màu sắc.</li>
<liclass="mb-1"><strong>Border-radius</strong>: Bo góc viền phần tử.</li>
</ul>
<hr/>
<h2class="text-2xl font-bold mt-6 mb-4">6. <strong>Ứng Dụng Thực Tế</strong></h2>
<ulclass="list-disc pl-6 mb-4">
<liclass="mb-1">
<pclass="mb-4"><strong>Định dạng Form</strong>: Sử dụng <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian giữa các ô nhập liệu, <codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code> để tạo khoảng cách giữa các phần tử trong form, và <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code> để tạo viền cho các ô nhập liệu.</p>
</li>
<liclass="mb-1">
<pclass="mb-4"><strong>Card Layouts</strong>: Tạo hiệu ứng bìa cho các thẻ bằng cách sử dụng <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian bên trong, <codeclass="bg-gray-100 rounded px-1 py-0.5">margin</code> để căn chỉnh, và <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code> để làm nổi bật các phần tử.</p>
</li>
<liclass="mb-1">
<pclass="mb-4"><strong>Nút Bấm</strong>: Sử dụng <codeclass="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian trong nút bấm, <codeclass="bg-gray-100 rounded px-1 py-0.5">border-radius</code> để bo góc, và <codeclass="bg-gray-100 rounded px-1 py-0.5">border</code> để xác định viền của nút.</p>
</li>
</ul></div></article><footerclass="mt-8 border-t pt-4"><pclass="text-center text-gray-500">© 2024 SFIT | <atarget="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><scriptsrc="/_next/static/chunks/webpack-457dc077475af9ee.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"4:\"$Sreact.fragment\"\n5:I[15244,[],\"\"]\n6:I[43866,[],\"\"]\n7:I[96641,[\"177\",\"static/chunks/app/layout-40e71d42d3ccdee8.js\"],\"Analytics\"]\n9:I[86213,[],\"OutletBoundary\"]\nb:I[86213,[],\"MetadataBoundary\"]\nd:I[86213,[],\"ViewportBoundary\"]\nf:I[34835,[],\"\"]\n1:HL[\"/_next/static/media/4473ecc91f70f139-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n2:HL[\"/_next/static/media/463dafcda517f24f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n3:HL[\"/_next/static/css/e503160baa2cd0f0.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"wpuafLjPzZSt3xkV7rnb4\",\"p\":\"\",\"c\":[\"\",\"docs\",\"6757f83bc509c86dd6795d4e\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"id\",\"6757f83bc509c86dd6795d4e\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$4\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e503160baa2cd0f0.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[null,[\"$\",\"body\",null,{\"className\":\"__variable_1e4310 __variable_c3aa02 antialiased\",\"children\":[[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}],[\"$\",\"$L7\",null,{}]]}]]}]]}],{\"children\":[\"docs\",[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"6757f83bc509c86dd6795d4e\",\"d\"],[\"$\",\"$4\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"docs\",\"children\",\"$0:f:0:1:2:children:2:children:0\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$4\",\"c\",{\"children\":[\"$L8\",null,[\"$\",\"$L9\",null,{\"children\":\"$La\"}]]}],{},null]},null]},null]},null],[\"$\",\"$4\",\"h\",{\"children\":[null,[\"$\",\"$4\",\"OTTOdEgY9IFxgs8RMZery\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\"}]]}]]}]]],\"m\":\"$undefined\",\"G\":[\"$f\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"10:I[48073,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"default\"]\n12:I[44839,[\"839\",\"static/chunks/839-150b5850706a66a5.js\",\"664\",\"static/chunks/664-604679c007c3b6d5.js\",\"642\",\"static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js\"],\"\"]\n11:T1668,"])</script><script>self.__next_f.push([1,"# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border\n\n## 1. **Padding** – Khoảng cách bên trong\n\nThuộc tính `padding` được sử dụng để tạo khoảng cách giữa nội dung bên trong phần tử (chữ, hình ảnh, v.v.) và viền của phần tử.\n\n### Các thuộc tính liên quan đến `padding`:\n- `padding`: Tạo khoảng cách đồng đều ở tất cả các cạnh.\n- `padding-top`: Khoảng cách giữa nội dung và viền phía trên.\n- `padding-right`: Khoảng cách giữa nội dung và viền phía bên phải.\n- `padding-bottom`: Khoảng cách giữa nội dung và viền phía dưới.\n- `padding-left`: Khoảng cách giữa nội dung và viền phía bên trái.\n\n### Ví dụ:\n```css\n/* Padding đồng đều cho tất cả các cạnh */\ndiv {\n padding: 20px;\n}\n\n/* Padding cho từng cạnh */\ndiv {\n padding-top: 10px;\n padding-right: 15px;\n padding-bottom: 20px;\n padding-left: 25px;\n}\n```\n\n### Lý thuyết:\n- `padding` giúp tạo không gian giữa nội dung của phần tử và viền, giúp cải thiện tính thẩm mỹ và dễ đọc cho nội dung bên trong.\n\n---\n\n## 2. **Margin** – Khoảng cách bên ngoài\n\nThuộc tính `margin` dùng để tạo khoảng cách giữa phần tử và các phần tử xung quanh nó.\n\n### Các thuộc tính liên quan đến `margin`:\n- `margin`: Tạo khoảng cách đồng đều cho tất cả các cạnh.\n- `margin-top`: Khoảng cách giữa phần tử và phần tử phía trên.\n- `margin-right`: Khoảng cách giữa phần tử và phần tử bên phải.\n- `margin-bottom`: Khoảng cách giữa phần tử và phần tử phía dưới.\n- `margin-left`: Khoảng cách giữa phần tử và phần tử bên trái.\n- `auto`: Dùng để tự động căn giữa phần tử, thường sử dụng trong các phần tử block (ví dụ: `margin-left: auto; margin-right: auto;`).\n\n### Ví dụ:\n```css\n/* Margin đồng đều cho tất cả các cạnh */\ndiv {\n margin: 20px;\n}\n\n/* Margin cho từng cạnh */\ndiv {\n margin-top: 10px;\n margin-right: 15px;\n margin-bottom: 20px;\n margin-left: 25px;\n}\n\n/* Căn giữa phần tử */\ndiv {\n width: 50%;\n margin-left: auto;\n margin-right: auto;\n}\n```\n\n### Lý thuyết:\n- `margin` được sử dụng để tạo không gian giữa phần tử và các phần tử khác trên trang. Nó cũng giúp căn chỉnh phần tử trong một trang hoặc một container.\n\n---\n\n## 3. **Border** – Viền\n\nThuộc tính `border` dùng để tạo viền bao quanh phần tử. Nó bao gồm các thuộc tính con cho việc thiết lập màu sắc, kiểu và độ rộng của viền.\n\n### Các thuộc tính liên quan đến `border`:\n- `border`: Tạo viền cho tất cả các cạnh của phần tử (kết hợp giữa độ rộng, kiểu và màu sắc của viền).\n- `border-width`: Độ rộng của viền.\n- `border-style`: Kiểu của viền (ví dụ: `solid`, `dashed`, `dotted`, `double`, v.v.).\n- `border-color`: Màu sắc của viền.\n- `border-top`: Viền phía trên của phần tử (bao gồm `border-top-width`, `border-top-style`, `border-top-color`).\n- `border-right`: Viền phía bên phải của phần tử (bao gồm `border-right-width`, `border-right-style`, `border-right-color`).\n- `border-bottom`: Viền phía dưới của phần tử (bao gồm `border-bottom-width`, `border-bottom-style`, `border-bottom-color`).\n- `border-left`: Viền phía bên trái của phần tử (bao gồm `border-left-width`, `border-left-style`, `border-left-color`).\n- `border-radius`: Để bo góc cho viền.\n\n### Ví dụ:\n```css\n/* Viền đồng đều cho tất cả các cạnh */\ndiv {\n border: 2px solid #3498db;\n}\n\n/* Viền cho từng cạnh */\ndiv {\n border-top: 3px dashed red;\n border-right: 2px solid blue;\n border-bottom: 1px dotted green;\n border-left: 4px double black;\n}\n\n/* Bo góc cho viền */\ndiv {\n border-radius: 10px;\n}\n```\n\n### Lý thuyết:\n- `border` giúp tạo viền bao quanh phần tử, có thể thay đổi màu sắc, độ rộng và kiểu dáng để làm nổi bật hoặc tạo hiệu ứng cho phần tử.\n- `border-radius` tạo góc bo tròn cho viền phần tử, giúp giao diện trang web mềm mại hơn.\n\n---\n\n## 4. **Thuộc Tính Kết Hợp**\n\n### Ví dụ về sử dụng kết hợp `padding`, `margin` và `border`:\n```css\n/* Tạo không gian và viền cho phần tử */\ndiv {\n padding: 20px;\n margin: 30px;\n border: 2px solid #3498db;\n border-radius: 8px;\n}\n```\n\n### Giải thích:\n- Phần tử này có 20px padding ở bên trong, 30px margin ở bên ngoài, viền 2px màu xanh dương và góc bo tròn 8px.\n\n---\n\n## 5. **Tóm Tắt**\n- **Padding**: Khoảng cách giữa nội dung và viền của phần tử.\n- **Margin**: Khoảng cách giữa phần tử và các phần tử khác.\n- **Border**: Viền bao quanh phần tử, có thể thay đổi độ rộng, kiểu dáng và màu sắc.\n- **Border-radius**: Bo góc viền phần tử.\n\n---\n\n## 6. **Ứng Dụng Thực Tế**\n\n- **Định dạng Form**: Sử dụng `padding` để tạo không gian giữa các ô nhập liệu, `margin` để tạo khoảng cách giữa các phần tử trong form, và `border` để tạo viền cho các ô nhập liệu.\n \n- **Card Layouts**: Tạo hiệu ứng bìa cho các thẻ bằng cách sử dụng `padding` để tạo không gian bên trong, `margin` để căn chỉnh, và `border` để làm nổi bật các phần tử.\n\n- **Nút Bấm**: Sử dụng `padding` để tạo không gian trong nút bấm, `border-radius` để bo góc, và `border` để xác định viền của nút."])</script><script>self.__next_f.push([1,"8:[\"$\",\"main\",null,{\"className\":\"container mx-auto px-4 pt-2 py-8\",\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}],[\"$\",\"p\",null,{\"className\":\"text-gray-600\",\"children\":[\"Đăng bởi \",[\"$\",\"i\",null,{\"children\":\"zunohoang\"}],\" vào \",[\"$\",\"time\",null,{\"dateTime\":\"2024-12-10T08:13:47.552Z\",\"children\":\"12/10/2024\"}]]}]]}],[\"$\",\"p\",null,{\"children\":[\"👁️ \",41,\" lượt xem\"]}]]}],[\"$\",\"article\",null,{\"children\":[\"$\",\"$L10\",null,{\"content\":\"$11\"}]}],[\"$\",\"footer\",null,{\"className\":\"mt-8 border-t pt-4\",\"children\":[\"$\",\"p\",null,{\"className\":\"text-center text-gray-500\",\"children\":[\"© 2024 SFIT | \",[\"$\",\"$L12\",null,{\"href\":\"https://github.com/zunohoang\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":\"zunohoang\"}],\". All rights reserved.\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"1\",{\"children\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}],[\"$\",\"meta\",\"2\",{\"name\":\"description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border\\n\\n## 1. **Padding** – Khoảng cách bên trong\\n\\nThuộc tính `padding` được sử dụng để tạo khoảng cách gi...\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border\\n\\n## 1. **Padding** – Khoảng cách bên trong\\n\\nThuộc tính `padding` được sử dụng để tạo khoảng cách gi...\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"8\",{\"property\":\"article:published_time\",\"content\":\"2024-12-10T08:13:47.552Z\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:author\",\"content\":\"zunohoang\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"# Các Thuộc Tính CSS Liên Quan Đến Padding, Margin và Border\\n\\n## 1. **Padding** – Khoảng cách bên trong\\n\\nThuộc tính `padding` được sử dụng để tạo khoảng cách gi...\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image\",\"content\":\"https://study.sfit.com.vn/bgclb.jpg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:alt\",\"content\":\"Tài liệu HTML,CSS,JS - Padding, Margin và Border\"}]]\na:null\n"])</script></body></html>