โมเดลกล่อง: 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 มีกฎบางกฎที่อนุญาตให้กำหนดมุมเข้าด้วยมาตราฐานน้อยกว่าสี่ค่า กฎนี้คือ:

  • ถ้าขาดค่าของมุมเข้าซ้าย ใช้ค่าของมุมเข้าขวา
  • ถ้าขาดค่าของมุมเข้าล่าง ใช้ค่าของมุมเข้าบน
  • ถ้าขาดค่าของมุมเข้าขวา ใช้ค่าของมุมเข้าบน

ภาพด้านล่างนี้มีวิธีที่ชัดเจนที่สุดในการเข้าใจนี้:

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 设置元素的上外边距。