initial commit

1 files changed, 227 insertions, 0 deletions

diff --git a/files/th/web/css/margin/index.html b/files/th/web/css/margin/index.html
new file mode 100644
index 0000000000..e0dc9d6183
--- /dev/null
+++ b/files/th/web/css/margin/index.html
@@ -0,0 +1,227 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - การอ้างอิง
+  - คุณสมบัติของ CSS
+translation_of: Web/CSS/margin
+---
+<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>&lt;ความยาว&gt;</code></dt>
+ <dd>กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("&lt;length&gt;")}} สำหรับหน่วยวัดที่ใช้ได้</dd>
+ <dt><code>&lt;ร้อยละ&gt;</code></dt>
+ <dd>ค่า {{cssxref("&lt;percentage&gt;")}} ที่สัมพันธ์กับ <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">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</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>