diff options
Diffstat (limited to 'files/th/web/css/margin/index.html')
| -rw-r--r-- | files/th/web/css/margin/index.html | 228 |
1 files changed, 0 insertions, 228 deletions
diff --git a/files/th/web/css/margin/index.html b/files/th/web/css/margin/index.html deleted file mode 100644 index f5c72f37f4..0000000000 --- a/files/th/web/css/margin/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |