diff options
Diffstat (limited to 'files/th/web/css/margin/index.html')
| -rw-r--r-- | files/th/web/css/margin/index.html | 227 |
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><ความยาว></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> |