From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/web/css/margin/index.html | 227 +++++++++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 files/th/web/css/margin/index.html (limited to 'files/th/web/css/margin/index.html') 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 +--- +
{{CSSRef}}
+ +

สาระสำคัญ

+ +

คุณสมบัติ CSS margin ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} และ {{ Cssxref("margin-left") }}.

+ +

อนุญาตให้ใช้ค่าที่ติดลบได้

+ +

{{cssinfo}}

+ +

ไวยากรณ์

+ +
/* นำไปใช้กับสี่ด้าน */
+margin: 1em;
+
+/* ด้านแนวตั้ง | ด้านแนวนอน */
+margin: 5% auto;
+
+/* ด้านบน | ด้านแนวนอน | ด้านล่าง */
+margin: 1em auto 2em;
+
+/* ด้านบน | ด้านขวา | ด้านล่าง | ด้านซ้าย */
+margin: 2px 1em 0 auto;
+
+/* ค่า Global */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

ค่า

+ +

ยอมรับทั้งหนึ่ง สอง สาม หรือสี่ค่า ดังต่อไปนี้:

+ +
+
<ความยาว>
+
กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ {{cssxref("<length>")}} สำหรับหน่วยวัดที่ใช้ได้
+
<ร้อยละ>
+
ค่า {{cssxref("<percentage>")}} ที่สัมพันธ์กับ ความกว้าง ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้
+
auto
+
auto จะถูกแทนที่ด้วยบางค่าที่เหมาะสม เช่น สามารถใช้ในการจัดแนวบล็อก div ลูกให้อยู่กึ่งกลางตามแนวนอนภายใน div  แม่ได้ { width:50%;  margin:0 auto; } 
+
+ + + +

ไวยากรณ์ทั่วไป

+ +
{{csssyntax}}
+ +

ตัวอย่าง

+ +

ตัวอย่างอย่างง่าย

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

ตัวอย่างอื่นๆ

+ +
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 */
+
+ +

การจัดกึ่งกลางตามแนวนอนด้วย margin: 0 auto;

+ +

เพื่อทำให้บางสิ่งอยู่กึ่งกลางตามแนวนอนในเบราเซอร์สมัยใหม่ จะใช้ display: flex; justify-content: center; .

+ +

อย่างไรก็ตาม เบราเซอร์เก่าเช่น IE8-9 ยังไม่พร้อมใช้งาน ในการเรียงให้กึ่งกลางภายในอิลิเมนต์แม่ ให้ใช้ margin: 0 auto;

+ +

ข้อกำหนด

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ข้อกำหนดสถานะความเห็น
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}กำหนดให้ margin สามารถเคลื่อนไหวได้
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}กำหนดนินามตั้งต้น
+ +

ความกันได้ของเบราเซอร์

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
คุณลักษณะChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
การรองรับเบื้องต้น1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
ค่า auto1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (โหมดจำกัด)3.51.0 (85)
+
+ +
+ + + + + + +
คุณลักษณะ
+ + + + + + + + + + + + + + + + + + + + + +
AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
การรองรับเบื้องต้น1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

ดูเพิ่มเติม

+ + -- cgit v1.2.3-54-g00ecf