โมเดลกล่อง: margin CSS
พื้นที่ช่องว่างที่อยู่รอบนอกของเศษเรียกว่า margin การตั้งค่า margin จะทำให้เกิดช่องว่างเพิ่มเติมนอกเศษ
วิธีที่ง่ายที่สุดในการตั้งค่าเมื่ออัตราเส้นกว้างคือ margin รายการ ซึ่งรับหน่วยมาตราฐานความยาวทุกชนิด หรือตัวเลขเปอร์เซ็นต์ และมีค่าลบเช่นกัน
CSS margin 属性
วิธีที่ง่ายที่สุดในการตั้งค่าเมื่ออัตราเส้นกว้างคือ margin รายการ。
margin รับหน่วยมาตราฐานความยาวทุกชนิด ทั้งพิกเซล นิ้ว มิลลิเมตร หรือ em。
margin สามารถถูกตั้งเป็น auto แต่มีทางเลือกที่นิยมมากขึ้นคือการตั้งค่าความยาวสำหรับเมื่ออัตราเส้นกว้าง คำแถลงของต่อไปนี้กำหนดเมื่ออัตราเส้นกว้าง 1/4 นิ้วบริเวณด้านข้าง h1 ขององค์ประกอบทั้งหมด:
h1 {margin : 0.25in;}
ตัวอย่างด้านล่างนี้กำหนดเมื่ออัตราเส้นกว้างของ h1 สี่ด้านต่างกัน หน่วยมาตราฐานที่ใช้คือพิกเซล (px):
h1 {margin : 10px 0px 15px 5px;}
เหมือนกับการกำหนดเมื่อมุมในเนื้อหา ลำดับของค่าเหล่านี้เริ่มจากมุมเข้าบน (top) และเลี้ยวอยู่ตามเส้นโค้งออกไปตามทิศทางวงกลม:
margin: top right bottom left
นอกจากนี้ ยังสามารถกำหนดมาตราฐานเปอร์เซ็นต์สำหรับ margin ได้
p {margin : 10%;}
เปอร์เซ็นต์เป็นค่าที่คาดเดาจาก width ขององค์ประกอบพ่อ ตัวอย่างนี้มีมุมเข้าขององค์ประกอบ p คือ 10% ของ width ขององค์ประกอบพ่อ
มาตราฐานของ margin คือ 0 ดังนั้นถ้าไม่มีการกำหนดมาตราฐานของ margin จะไม่มีมุมเข้า แต่ในทางปฏิบัติ โปรแกรมน่าดูเพื่อเครื่องแสดงผลหลายตัวได้มีมาตราฐานเดี่ยวกันสำหรับหลายองค์ประกอบ มุมเข้าก็ไม่แก้ไขไป ตัวอย่างเช่น ในเครื่องแสดงผลที่สนับสนุน CSS มุมเข้าจะถูกสร้างเป็น "ช่องว่าง" บนและล่างแต่ละองค์ประกอบของจุดข้อความ ดังนั้นถ้าไม่มีการกำหนดมุมเข้าขององค์ประกอบ p โปรแกรมน่าดูอาจจะปรับปรุงมุมเข้าเอง แต่ถ้าคุณได้ปรับปรุงมาตราฐานอย่างเฉพาะเจาะจง จะทำให้กลับควบคุมมาตราฐานเดี่ยวกัน
การคัดลอกค่า
คุณจำไหม? เราได้กล่าวถึงการคัดลอกค่าในช่วงสองช่องที่แล้ว ในนี้เราจะเล่าว่าจะใช้การคัดลอกค่าได้อย่างไร
บางครั้ง เราจะใส่ค่าที่ซ้ำกัน
p {margin: 0.5em 1em 0.5em 1em;}
ผ่านการคัดลอกค่า คุณไม่จำเป็นต้องใส่ค่านี้ซ้ำ กฎนี้เท่ากับกฎด้านล่างนี้:
p {margin: 0.5em 1em;}
ค่าทั้งสองค่านี้สามารถทดแทนค่าสี่ค่าก่อนหน้านี้ได้ แล้วเป็นอย่างไรที่จะทำได้นี้? CSS มีกฎบางกฎที่อนุญาตให้กำหนดมุมเข้าด้วยมาตราฐานน้อยกว่าสี่ค่า กฎนี้คือ:
- ถ้าขาดค่าของมุมเข้าซ้าย ใช้ค่าของมุมเข้าขวา
- ถ้าขาดค่าของมุมเข้าล่าง ใช้ค่าของมุมเข้าบน
- ถ้าขาดค่าของมุมเข้าขวา ใช้ค่าของมุมเข้าบน
ภาพด้านล่างนี้มีวิธีที่ชัดเจนที่สุดในการเข้าใจนี้:

ในทางกลับกัน ถ้ามีการกำหนดมาตราฐานของมุมเข้าไป 3 ค่า ค่าที่ 4 (ซ้ายมุมเข้า) จะถูกคัดลอกมาจากค่าที่ 2 (ขวามุมเข้า) ถ้ามีการกำหนด 2 ค่า ค่าที่ 4 จะถูกคัดลอกมาจากค่าที่ 2 และค่าที่ 3 (ล่างมุมเข้า) จะถูกคัดลอกมาจากค่าที่ 1 (บนมุมเข้า) ในกรณีสุดท้าย ถ้ามีการกำหนดมาตราฐานเพียงค่าเดียว ค่าของสามมุมเข้าอื่น ๆ จะถูกคัดลอกมาจากค่านี้ (บนมุมเข้า)
ใช้กลไกง่ายๆนี้ คุณเพียงจะต้องระบุค่าที่จำเป็นโดยไม่จำเป็นต้องใช้ค่าทั้งสี่ค่า เช่น:
h1 {margin: 0.25em 1em 0.5em;} /* คล้ายกับ 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /* คล้ายกับ 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* เท่ากับ 1px 1px 1px 1px */
วิธีนี้มีข้อจำกัดเล็กน้อย คุณจะต้องเผชิญกับปัญหานี้ในที่สุด หากคุณต้องการตั้งค่า margin ขององค์ประกอบ p ด้านบนและด้านซ้ายเป็น 20 พิกเซล และ margin ด้านล่างและด้านขวาเป็น 30 พิกเซล ในกรณีนี้ คุณจำเป็นต้องเขียนเช่นนี้
p {margin: 20px 30px 30px 20px;}
เช่นเดียวกัน คุณจะได้ผลลัพธ์ที่ต้องการ น่าเสียดายว่าในกรณีนี้ จำนวนค่าที่จำเป็นไม่สามารถลดลงได้
อีกตัวอย่างหนึ่ง หากคุณต้องการที่นอกจาก margin ด้านซ้ายแล้ว ค่า margin ทั้งหมดอื่น ๆ จะเป็น auto (margin ด้านซ้ายเป็น 20px)
p {margin: auto auto auto 20px;}
เช่นเดียวกัน คุณจะได้ผลลัพธ์ที่ต้องการ ปัญหาคือ การใส่ auto นี้เป็นเรื่องที่ยากเหลือเกิน
คุณสมบัติ margin ข้างเดียว
คุณสามารถใช้คุณสมบัติ margin ข้างเดียวเพื่อตั้งค่าค่า margin สำหรับขอบเขตข้างเดียวขององค์ประกอบ หากคุณต้องการตั้งค่า margin ขององค์ประกอบ p ด้านซ้ายเป็น 20px ไม่จำเป็นต้องใช้ margin (ต้องใส่ auto มากมาย) แต่คุณสามารถใช้วิธีดังนี้
p {margin-left: 20px;}
คุณสามารถใช้คุณสมบัติใด ๆ ต่อไปนี้เพื่อตั้งค่า margin สำหรับขอบเขตด้านบนโดยไม่ทำให้ความสัมพันธ์กับ margin ทั้งหมดอื่น ๆ
คุณสามารถใช้ค่าทางเดียวหลายรายการในกฎหมายนี้ ตัวอย่างเช่น:
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
ต้องการบ้างนั้น การใช้ margin อาจง่ายขึ้นบ้าง:
p {margin: 20px 30px 30px 20px;}
ไม่ว่าจะใช้ค่าทางเดียวหรือ margin ผลลัพธ์ที่ได้เป็นเดียวกัน โดยทั่วไปแล้ว ถ้าคุณต้องการตั้งค่า margin สำหรับขอบเขตหลายฝั่ง การใช้ margin จะง่ายขึ้นบ้าง อย่างไรก็ตาม จากมุมมองของการแสดงเอกสาร ในทางปฏิบัติทั้งสองวิธีเหล่านั้นไม่มีความแตกต่าง ดังนั้นคุณควรเลือกวิธีที่ง่ายต่อตัวเอง
คำเตือน และ หมายเหตุ
คำเตือน:Netscape และ IE ได้กำหนดค่าเริ่มต้นของ margin สำหรับแท็ก body ว่า 8px แต่ Opera ไม่เช่นนั้น ตรงกันข้าม Opera ได้กำหนดค่าเริ่มต้นของ padding ว่า 8px ดังนั้นถ้าคุณต้องการปรับเปลี่ยนขอบเขตของเว็บไซต์ทั้งหมดและแสดงใน Opera อย่างถูกต้อง คุณจำเป็นต้องปรับแต่ง padding ของ body
ตัวอย่าง CSS ขอบเขตนอก (margin)
- ตั้งค่าขอบเขตด้านซ้ายของข้อความ
- 本例演示如何设置文本的左外边距。
- 设置文本的右外边距
- 本例演示如何设置文本的右外边距。
- 设置文本的上外边距
- 本例演示如何设置文本的上外边距。
- 设置文本的下外边距
- 本例演示如何设置文本的下外边距。
- 所有的外边距属性在一个声明中。
- 本例演示如何将所有的外边距属性设置于一个声明中。
CSS 外边距属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |