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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
---
title: margin
slug: Web/CSS/margin
tags:
- CSS
- การอ้างอิง
- คุณสมบัติของ CSS
translation_of: Web/CSS/margin
translation_of_original: Web/CSS/margin-new
---
<div>{{CSSRef}}</div>
<h2 id="สาระสำคัญ">สาระสำคัญ</h2>
<p>คุณสมบัติ CSS <strong><code>margin</code></strong> ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} และ {{ Cssxref("margin-left") }}.</p>
<p>อนุญาตให้ใช้ค่าที่ติดลบได้</p>
<p>{{cssinfo}}</p>
<h2 id="ไวยากรณ์">ไวยากรณ์</h2>
<pre class="brush:css">/* นำไปใช้กับสี่ด้าน */
margin: 1em;
/* ด้านแนวตั้ง | ด้านแนวนอน */
margin: 5% auto;
/* ด้านบน | ด้านแนวนอน | ด้านล่าง */
margin: 1em auto 2em;
/* ด้านบน | ด้านขวา | ด้านล่าง | ด้านซ้าย */
margin: 2px 1em 0 auto;
/* ค่า Global */
margin: inherit;
margin: initial;
margin: unset;
</pre>
<h3 id="ค่า">ค่า</h3>
<p>ยอมรับทั้งหนึ่ง สอง สาม หรือสี่ค่า ดังต่อไปนี้:</p>
<dl>
<dt><code><ความยาว></code></dt>
<dd>กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("<length>")}} สำหรับหน่วยวัดที่ใช้ได้</dd>
<dt><code><ร้อยละ></code></dt>
<dd>ค่า {{cssxref("<percentage>")}} ที่สัมพันธ์กับ <strong>ความกว้าง</strong> ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้</dd>
<dt><code>auto</code></dt>
<dd><code>auto จะถูกแทนที่ด้วยบางค่าที่เหมาะสม</code> เช่น สามารถใช้ในการจัดแนวบล็อก <code>div ลูกให้อยู่</code>กึ่งกลาง<font face="Consolas, Liberation Mono, Courier, monospace">ตามแนวนอนภายใน </font>div แม่ได้ <code>{ width:50%; margin:0 auto; }</code> </dd>
</dl>
<ul>
<li><strong>หนึ่ง</strong> ค่าจะถูกนำไปใช้กับ<strong>ทั้งสี่ด้าน</strong></li>
<li><strong>สอง</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบนและด้านล่าง </strong>และตามด้วย <strong>ด้านซ้ายและด้านขวา</strong> </li>
<li><strong>สาม</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบน </strong>ตามด้วย<strong>ด้านซ้ายและด้านขวา</strong> และตามด้วย <strong>ด้านล่าง</strong></li>
<li><strong>สี่</strong> ค่าจะถูกนำไปใช้กับ <strong>ด้านบน</strong> <strong>ด้านขวา</strong> <strong>ด้านล่าง</strong> และ<strong>ด้านซ้าย</strong> ตามลำดับ (ทวนเข็มนาฬิกา)</li>
</ul>
<h3 id="ไวยากรณ์ทั่วไป">ไวยากรณ์ทั่วไป</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="ตัวอย่าง">ตัวอย่าง</h2>
<h3 id="ตัวอย่างอย่างง่าย">ตัวอย่างอย่างง่าย</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div class="ex1">
margin: auto;
background: gold;
width: 66%;
</div>
<div class="ex2">
margin: 20px 0 0 -20px;
background: gold;
width: 66%;
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight:[2,7]">.ex1 {
margin: auto;
background: gold;
width: 66%;
}
.ex2 {
margin: 20px 0px 0 -20px;
background: gold;
width: 66%;
}</pre>
<p>{{ EmbedLiveSample('Simple_example') }}</p>
<h3 id="ตัวอย่างอื่นๆ">ตัวอย่างอื่นๆ</h3>
<pre class="brush: css">margin: 5%; /* ระยะขอบกั้น 5% ทั้งหมด */
margin: 10px; /* ระยะขอบกั้น 10px ทั้งหมด */
margin: 1.6em 20px; /* ระยะขอบกั้นด้านบนและด้านล่าง 1.6em และ ด้านซ้ายและด้านขวา 20px */
margin: 10px 3% 1em; /* ระยะขอบกั้นด้านบน 10px ด้านซ้ายและด้านขวา 3% และด้านล่าง 1em */
margin: 10px 3px 30px 5px; /* ระยะขอบกั้นด้านบน 10px ด้านขวา 3px ด้านล่าง 30px และด้านซ้าย 5px */
margin: 1em auto; /* ระยะขอบกั้นด้านบนและด้านล่าง 1em และกล่องจะถูกจัดกึ่งกลางตามแนวนอน */
margin: auto; /* กล่องจะถูกจัดกึ่งกลางตามแนวนอน ระยะขอบกั้นด้านบนและด้านล่างเป็น 0 */
</pre>
<h2 id="การจัดกึ่งกลางตามแนวนอนด้วย_margin_0_auto">การจัดกึ่งกลางตามแนวนอนด้วย <code>margin: 0 auto;</code></h2>
<p>เพื่อทำให้บางสิ่งอยู่กึ่งกลางตามแนวนอนในเบราเซอร์สมัยใหม่ จะใช้ <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p>
<p>อย่างไรก็ตาม เบราเซอร์เก่าเช่น IE8-9 ยังไม่พร้อมใช้งาน ในการเรียงให้กึ่งกลางภายในอิลิเมนต์แม่ ให้ใช้ <code>margin: 0 auto;</code></p>
<h2 id="ข้อกำหนด">ข้อกำหนด</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">ข้อกำหนด</th>
<th scope="col">สถานะ</th>
<th scope="col">ความเห็น</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>กำหนดให้ <code>margin</code> สามารถเคลื่อนไหวได้</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Removes its effect on inline elements.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>กำหนดนินามตั้งต้น</td>
</tr>
</tbody>
</table>
<h2 id="ความกันได้ของเบราเซอร์">ความกันได้ของเบราเซอร์</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>คุณลักษณะ</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>การรองรับเบื้องต้น</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td><code>ค่า auto</code></td>
<td>1.0</td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>6.0 (โหมดจำกัด)</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>คุณลักษณะ</th>
</tr>
</tbody>
</table>
<table class="compat-table">
<tbody>
<tr>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>การรองรับเบื้องต้น</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>6.0</td>
<td>6.0</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
<h2 id="ดูเพิ่มเติม">ดูเพิ่มเติม</h2>
<ul>
<li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">การยุบระยะขอบกั้น</a></li>
</ul>
|
