-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathPadding_margin_border.htm
More file actions
149 lines (143 loc) · 40 KB
/
Padding_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><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="/_next/static/css/e503160baa2cd0f0.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-457dc077475af9ee.js"/><script src="/_next/static/chunks/4bd1b696-3cf1b1127452a604.js" async=""></script><script src="/_next/static/chunks/517-6cbbb564b6b7a65d.js" async=""></script><script src="/_next/static/chunks/main-app-8eb68113308ecd14.js" async=""></script><script src="/_next/static/chunks/app/layout-40e71d42d3ccdee8.js" async=""></script><script src="/_next/static/chunks/839-150b5850706a66a5.js" async=""></script><script src="/_next/static/chunks/664-604679c007c3b6d5.js" async=""></script><script src="/_next/static/chunks/app/docs/%5Bid%5D/page-cdb6ed9e6ae8a094.js" async=""></script><meta name="next-size-adjust"/><title>Tài liệu HTML,CSS,JS - Padding, Margin và Border</title><meta name="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..."/><meta property="og:title" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><meta property="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..."/><meta property="og:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta property="og:image:alt" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2024-12-10T08:13:47.552Z"/><meta property="article:author" content="zunohoang"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><meta name="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..."/><meta name="twitter:image" content="https://study.sfit.com.vn/bgclb.jpg"/><meta name="twitter:image:alt" content="Tài liệu HTML,CSS,JS - Padding, Margin và Border"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body class="__variable_1e4310 __variable_c3aa02 antialiased"><main class="container mx-auto px-4 pt-2 py-8"><header class="mb-3 border-b-[1px] py-5 border-gray-300 flex justify-between"><div><h1 class="text-3xl font-bold">Tài liệu HTML,CSS,JS - Padding, Margin và Border</h1><p class="text-gray-600">Đăng bởi <i>zunohoang</i> vào <time dateTime="2024-12-10T08:13:47.552Z">12/10/2024</time></p></div><p>👁️ <!-- -->41<!-- --> lượt xem</p></header><article><div class="markdown-body bg-white p-6 rounded-lg"><h1 class="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>
<h2 class="text-2xl font-bold mt-6 mb-4">1. <strong>Padding</strong> – Khoảng cách bên trong</h2>
<p class="mb-4">Thuộc tính <code class="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>
<h3 class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <code class="bg-gray-100 rounded px-1 py-0.5">padding</code>:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="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"><code class="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"><span class="token" style="color:#6a9955">/* Padding đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Padding cho từng cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding-top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">10</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding-right</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">15</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding-bottom</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding-left</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">25</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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/>
<h2 class="text-2xl font-bold mt-6 mb-4">2. <strong>Margin</strong> – Khoảng cách bên ngoài</h2>
<p class="mb-4">Thuộc tính <code class="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>
<h3 class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <code class="bg-gray-100 rounded px-1 py-0.5">margin</code>:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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ụ: <code class="bg-gray-100 rounded px-1 py-0.5">margin-left: auto; margin-right: auto;</code>).</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="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"><code class="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"><span class="token" style="color:#6a9955">/* Margin đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Margin cho từng cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">10</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-right</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">15</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-bottom</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-left</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">25</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Căn giữa phần tử */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">width</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">50</span><span class="token" style="color:#b5cea8">%</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-left</span><span class="token" style="color:#d4d4d4">:</span><span> auto</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin-right</span><span class="token" style="color:#d4d4d4">:</span><span> auto</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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/>
<h2 class="text-2xl font-bold mt-6 mb-4">3. <strong>Border</strong> – Viền</h2>
<p class="mb-4">Thuộc tính <code class="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>
<h3 class="text-xl font-bold mt-5 mb-3">Các thuộc tính liên quan đến <code class="bg-gray-100 rounded px-1 py-0.5">border</code>:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-width</code>: Độ rộng của viền.</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-style</code>: Kiểu của viền (ví dụ: <code class="bg-gray-100 rounded px-1 py-0.5">solid</code>, <code class="bg-gray-100 rounded px-1 py-0.5">dashed</code>, <code class="bg-gray-100 rounded px-1 py-0.5">dotted</code>, <code class="bg-gray-100 rounded px-1 py-0.5">double</code>, v.v.).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-color</code>: Màu sắc của viền.</li>
<li class="mb-1"><code class="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 <code class="bg-gray-100 rounded px-1 py-0.5">border-top-width</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-top-style</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-top-color</code>).</li>
<li class="mb-1"><code class="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 <code class="bg-gray-100 rounded px-1 py-0.5">border-right-width</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-right-style</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-right-color</code>).</li>
<li class="mb-1"><code class="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 <code class="bg-gray-100 rounded px-1 py-0.5">border-bottom-width</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-bottom-style</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-bottom-color</code>).</li>
<li class="mb-1"><code class="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 <code class="bg-gray-100 rounded px-1 py-0.5">border-left-width</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-left-style</code>, <code class="bg-gray-100 rounded px-1 py-0.5">border-left-color</code>).</li>
<li class="mb-1"><code class="bg-gray-100 rounded px-1 py-0.5">border-radius</code>: Để bo góc cho viền.</li>
</ul>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ:</h3>
<pre><div style="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"><code class="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"><span class="token" style="color:#6a9955">/* Viền đồng đều cho tất cả các cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">2</span><span class="token" style="color:#b5cea8">px</span><span> solid </span><span class="token hexcode color">#3498db</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Viền cho từng cạnh */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-top</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">3</span><span class="token" style="color:#b5cea8">px</span><span> dashed </span><span class="token color">red</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-right</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">2</span><span class="token" style="color:#b5cea8">px</span><span> solid </span><span class="token color">blue</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-bottom</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">1</span><span class="token" style="color:#b5cea8">px</span><span> dotted </span><span class="token color">green</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-left</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">4</span><span class="token" style="color:#b5cea8">px</span><span> double </span><span class="token color">black</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span><span>
</span>
<span></span><span class="token" style="color:#6a9955">/* Bo góc cho viền */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-radius</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">10</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Lý thuyết:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><code class="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>
<li class="mb-1"><code class="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/>
<h2 class="text-2xl font-bold mt-6 mb-4">4. <strong>Thuộc Tính Kết Hợp</strong></h2>
<h3 class="text-xl font-bold mt-5 mb-3">Ví dụ về sử dụng kết hợp <code class="bg-gray-100 rounded px-1 py-0.5">padding</code>, <code class="bg-gray-100 rounded px-1 py-0.5">margin</code> và <code class="bg-gray-100 rounded px-1 py-0.5">border</code>:</h3>
<pre><div style="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"><code class="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"><span class="token" style="color:#6a9955">/* Tạo không gian và viền cho phần tử */</span><span>
</span><span></span><span class="token" style="color:#d7ba7d">div</span><span> </span><span class="token" style="color:#d4d4d4">{</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">padding</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">20</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">margin</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">30</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">2</span><span class="token" style="color:#b5cea8">px</span><span> solid </span><span class="token hexcode color">#3498db</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span> </span><span class="token" style="color:#9cdcfe">border-radius</span><span class="token" style="color:#d4d4d4">:</span><span> </span><span class="token" style="color:#b5cea8">8</span><span class="token" style="color:#b5cea8">px</span><span class="token" style="color:#d4d4d4">;</span><span>
</span><span></span><span class="token" style="color:#d4d4d4">}</span></code></div></pre>
<h3 class="text-xl font-bold mt-5 mb-3">Giải thích:</h3>
<ul class="list-disc pl-6 mb-4">
<li class="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/>
<h2 class="text-2xl font-bold mt-6 mb-4">5. <strong>Tóm Tắt</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1"><strong>Padding</strong>: Khoảng cách giữa nội dung và viền của phần tử.</li>
<li class="mb-1"><strong>Margin</strong>: Khoảng cách giữa phần tử và các phần tử khác.</li>
<li class="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>
<li class="mb-1"><strong>Border-radius</strong>: Bo góc viền phần tử.</li>
</ul>
<hr/>
<h2 class="text-2xl font-bold mt-6 mb-4">6. <strong>Ứng Dụng Thực Tế</strong></h2>
<ul class="list-disc pl-6 mb-4">
<li class="mb-1">
<p class="mb-4"><strong>Định dạng Form</strong>: Sử dụng <code class="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian giữa các ô nhập liệu, <code class="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à <code class="bg-gray-100 rounded px-1 py-0.5">border</code> để tạo viền cho các ô nhập liệu.</p>
</li>
<li class="mb-1">
<p class="mb-4"><strong>Card Layouts</strong>: Tạo hiệu ứng bìa cho các thẻ bằng cách sử dụng <code class="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian bên trong, <code class="bg-gray-100 rounded px-1 py-0.5">margin</code> để căn chỉnh, và <code class="bg-gray-100 rounded px-1 py-0.5">border</code> để làm nổi bật các phần tử.</p>
</li>
<li class="mb-1">
<p class="mb-4"><strong>Nút Bấm</strong>: Sử dụng <code class="bg-gray-100 rounded px-1 py-0.5">padding</code> để tạo không gian trong nút bấm, <code class="bg-gray-100 rounded px-1 py-0.5">border-radius</code> để bo góc, và <code class="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><footer class="mt-8 border-t pt-4"><p class="text-center text-gray-500">© 2024 SFIT | <a target="_blank" rel="noopener noreferrer" href="https://github.com/zunohoang">zunohoang</a>. All rights reserved.</p></footer></main><!--$--><!--/$--><script src="/_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>