ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับ CSS Margins

สิ่งแรกที่พวกเราส่วนใหญ่เรียนรู้เมื่อเราเรียนรู้ CSS คือรายละเอียดของส่วนต่างๆ ของกล่องใน CSS ซึ่งอธิบายว่าเป็น CSS Box Model องค์ประกอบหนึ่งในแบบจำลองกล่องคือระยะขอบ ซึ่งเป็นพื้นที่โปร่งใสรอบกล่อง ซึ่งจะผลักองค์ประกอบอื่นๆ ออกจากเนื้อหาในกล่อง คุณสมบัติ margin-top , margin-right , margin-bottom และ margin margin-left ถูกอธิบายกลับมาใน CSS1 พร้อมกับการจดชวเลขสำหรับการตั้งค่าคุณสมบัติทั้งสี่พร้อมกัน

ระยะขอบดูเหมือนจะเป็นสิ่งที่ค่อนข้างไม่ซับซ้อน อย่างไรก็ตาม ในบทความนี้ เราจะมาดูบางสิ่งที่ดึงดูดผู้คนเกี่ยวกับการใช้ระยะขอบ โดยเฉพาะอย่างยิ่ง เราจะดูว่าระยะขอบโต้ตอบกันอย่างไร และการยุบระยะขอบทำงานจริงอย่างไร

โมเดลกล่อง CSS

เช่นเดียวกับบทความทั้งหมดเกี่ยวกับส่วนต่างๆ ของ CSS Box Model เราควรกำหนดสิ่งที่เราหมายถึงสิ่งนั้น และวิธีที่โมเดลได้รับการชี้แจงผ่านเวอร์ชันของ CSS โมเดลกล่อง หมายถึงการจัดวางและโต้ตอบส่วนต่างๆ ของกล่อง เช่น เนื้อหา ช่องว่างภายใน เส้นขอบ และระยะขอบ ใน CSS1 โมเดลกล่องมีรายละเอียดด้วยแผนภาพศิลปะ ASCII ที่แสดงในภาพด้านล่าง

คุณสมบัติระยะขอบทั้งสี่สำหรับแต่ละด้านของกล่องและชวเลข margin ทั้งหมดถูกกำหนดไว้ใน CSS1

ข้อกำหนด CSS2.1 มีภาพประกอบเพื่อสาธิตรูปแบบกล่องและยังกำหนดเงื่อนไขที่เรายังคงใช้เพื่ออธิบายกล่องต่างๆ ข้อกำหนดนี้จะอธิบายเกี่ยวกับ content box , padding box , border box และ margin box แต่ละรายการถูกกำหนดโดยขอบของเนื้อหา ช่องว่างภายใน เส้นขอบ และระยะขอบ ตามลำดับ

ขณะนี้มีข้อกำหนดโมเดลกล่องระดับ 3 เป็นร่างการทำงาน ข้อกำหนดนี้อ้างอิงกลับไปที่ CSS2 สำหรับคำจำกัดความของ Box Model และระยะขอบ ดังนั้นจึงเป็นคำจำกัดความ CSS2 ที่เราจะใช้สำหรับส่วนใหญ่ของบทความนี้

มาร์จิ้นยุบ

ข้อกำหนด CSS1 ตามที่กำหนดระยะขอบ ยังกำหนดว่าระยะขอบแนวตั้ง ยุบ พฤติกรรมที่พังทลายนี้เป็นที่มาของความคับข้องใจที่เกี่ยวข้องกับมาร์จิ้นตั้งแต่นั้นเป็นต้นมา การยุบ Margin นั้นสมเหตุสมผลหากคุณพิจารณาว่าในช่วงแรกๆ CSS ถูกใช้เป็นภาษาการจัดรูปแบบเอกสาร การยุบระยะขอบหมายความว่าเมื่อส่วนหัวที่มีระยะขอบด้านล่าง ตามด้วยย่อหน้าที่มีระยะขอบด้านบน คุณจะไม่พบช่องว่างขนาดใหญ่ระหว่างรายการเหล่านั้น

เมื่อระยะขอบยุบลง ระยะขอบจะรวมกันเพื่อให้ช่องว่างระหว่างองค์ประกอบทั้งสองมีขนาดใหญ่ขึ้นสำหรับระยะขอบทั้งสอง ระยะขอบที่เล็กกว่าจะสิ้นสุดภายในขอบเขตที่ใหญ่กว่า

ระยะขอบจะยุบในสถานการณ์ต่อไปนี้:

• พี่น้องที่อยู่ติดกัน
• กล่องเปล่า Complete
• องค์ประกอบหลักและองค์ประกอบลูกคนแรกหรือคนสุดท้าย

ลองมาดูที่แต่ละสถานการณ์เหล่านี้กัน ก่อนที่จะพิจารณาสิ่งต่าง ๆ ที่ป้องกันไม่ให้ระยะขอบยุบในสถานการณ์เหล่านี้

พี่น้องที่อยู่ติดกัน

คำอธิบายเบื้องต้นของฉันเกี่ยวกับการยุบระยะขอบเป็นการสาธิตว่าระยะขอบระหว่างพี่น้องที่อยู่ติดกันยุบอย่างไร นอกเหนือจากในสถานการณ์ที่กล่าวถึงด้านล่าง หากคุณมีสององค์ประกอบที่แสดงทีละรายการในโฟลว์ปกติ ระยะขอบด้านล่างขององค์ประกอบแรกจะยุบด้วยระยะขอบด้านบนขององค์ประกอบต่อไปนี้

ในตัวอย่าง CodePen ด้านล่าง มีองค์ประกอบ div สามองค์ประกอบ อันแรกมีระยะขอบด้านบนและด้านล่าง 50 พิกเซล ส่วนที่สองมีระยะขอบบนและล่าง 20px ที่สามมีระยะขอบบนและล่างของ 3em ระยะขอบระหว่างสององค์ประกอบแรกคือ 50 พิกเซล เนื่องจากระยะขอบด้านบนที่เล็กกว่าจะถูกรวมเข้ากับระยะขอบด้านล่างที่ใหญ่ขึ้น ระยะขอบระหว่างสององค์ประกอบที่สองใน 3em เนื่องจาก 3em มีขนาดใหญ่กว่า 20 พิกเซลที่ด้านล่างขององค์ประกอบที่สอง

กล่องเปล่าโดยสิ้นเชิง

หากกล่องว่างเปล่า ระยะขอบด้านบนและด้านล่างอาจยุบเข้าหากัน ในตัวอย่าง CodePen ต่อไปนี้ องค์ประกอบที่มีคลาสว่างจะมีระยะขอบด้านบนและด้านล่าง 50 พิกเซล อย่างไรก็ตาม ช่องว่างระหว่างรายการแรกและรายการที่สามไม่ใช่ 100 พิกเซล แต่เป็น 50 นี่เป็นเพราะระยะขอบทั้งสองยุบลง การเพิ่มอะไรก็ได้ลงในกล่องนั้น (แม้แต่ช่องว่างภายใน) จะทำให้ใช้ระยะขอบด้านบนและด้านล่างและไม่ยุบ

องค์ประกอบผู้ปกครองและลูกคนแรกหรือคนสุดท้าย

นี่เป็นสถานการณ์จำลองการยุบตัวของขอบซึ่งดึงดูดผู้คนได้บ่อยที่สุด เนื่องจากดูเหมือนจะไม่เข้าใจง่ายเป็นพิเศษ ใน CodePen ต่อไปนี้ ฉันมี div ที่มีคลาสของ wrapper และฉันได้ให้ div เป็น outline สีแดง เพื่อให้คุณเห็นว่ามันอยู่ที่ไหน องค์ประกอบย่อยทั้งสามมีระยะขอบ 50 พิกเซล อย่างไรก็ตาม รายการแรกและรายการสุดท้ายจะถูกล้างด้วยขอบของกระดาษห่อหุ้ม ไม่มีระยะขอบ 50 พิกเซลระหว่างองค์ประกอบและเสื้อคลุม

ทั้งนี้เนื่องจากระยะขอบของเด็กยุบกับระยะขอบใด ๆ บนหลัก และสิ้นสุดที่ด้านนอกของหลัก คุณสามารถเห็นสิ่งนี้ได้หากคุณตรวจสอบลูกคนแรกโดยใช้ DevTools พื้นที่สีเหลืองที่ไฮไลต์คือระยะขอบ

เฉพาะบล็อกระยะขอบ ยุบ

ตัวอย่างสุดท้ายยังเน้นย้ำถึงบางอย่างเกี่ยวกับการยุบมาร์จิ้น ใน CSS2 มีการระบุระยะขอบแนวตั้งเท่านั้นที่จะยุบ นั่นคือระยะขอบด้านบนและด้านล่างขององค์ประกอบ หากคุณอยู่ในโหมดการเขียนแนวนอน ดังนั้นระยะขอบด้านซ้ายและขวาด้านบนจึงไม่ยุบและสิ้นสุดที่ด้านนอกของกระดาษห่อหุ้ม

หมายเหตุ : ควรจำไว้ว่าระยะขอบจะยุบในทิศทางบล็อกเท่านั้น เช่น ระหว่างย่อหน้า

สิ่งที่ป้องกันไม่ให้มาร์จิ้นยุบ

ระยะขอบจะไม่ยุบหากรายการมีตำแหน่งที่แน่นอนหรือลอยอยู่ อย่างไรก็ตาม สมมติว่าคุณวิ่งเข้าไปในตำแหน่งใดตำแหน่งหนึ่งที่ระยะขอบยุบตามที่ระบุไว้ข้างต้น คุณจะหยุดการยุบตัวของระยะขอบเหล่านั้นได้อย่างไร

สิ่งแรกที่หยุดยุบคือสถานการณ์ที่มีบางอย่างระหว่างองค์ประกอบที่เป็นปัญหา

ตัวอย่างเช่น กล่องที่ว่างเปล่าไม่มีเนื้อหาจะไม่ยุบระยะขอบด้านบนและด้านล่าง หากมีเส้นขอบ หรือใช้ช่องว่างภายใน ในตัวอย่างด้านล่าง ฉันได้เพิ่มช่องว่างภายใน 1px ลงในกล่อง ขณะนี้มีระยะขอบ 50 พิกเซลด้านบนและด้านล่างกล่อง

ดูปากกา [ขอบ: ช่องว่างที่มีช่องว่างภายในไม่ยุบ](https://codepen.io/rachelandrew/pen/gNeMpg) โดย Rachel Andrew

สิ่งนี้มีเหตุผลอยู่เบื้องหลัง หากกล่องว่างเปล่าโดยสมบูรณ์โดยไม่มีขอบหรือช่องว่างภายใน ก็จะมองไม่เห็นโดยพื้นฐานแล้ว อาจเป็นองค์ประกอบย่อหน้าที่ว่างเปล่าที่ CMS ของคุณป้อนลงในมาร์กอัป หาก CMS ของคุณเพิ่มองค์ประกอบย่อหน้าที่ซ้ำซ้อน คุณอาจไม่ต้องการให้องค์ประกอบเหล่านั้นทำให้เกิดช่องว่างขนาดใหญ่ระหว่างย่อหน้าอื่นๆ เนื่องจากมีการให้เกียรติระยะขอบ ใส่อะไรก็ได้ในกล่อง แล้วคุณจะได้ช่องว่างเหล่านั้น

พฤติกรรมที่คล้ายคลึงกันนี้สามารถเห็นได้ด้วยระยะขอบบนลูกแรกหรือลูกสุดท้ายที่ยุบผ่านระดับบนสุด หากเราเพิ่มเส้นขอบให้กับพาเรนต์ ระยะขอบของเด็กจะอยู่ภายใน

มีเหตุผลบางอย่างในพฤติกรรมอีกครั้ง หากคุณมีองค์ประกอบการห่อเพื่อจุดประสงค์ทางความหมายซึ่งไม่แสดงเป็นภาพ คุณอาจไม่ต้องการให้พวกเขาสร้างช่องว่างขนาดใหญ่ในการแสดงผล สิ่งนี้สมเหตุสมผลมากเมื่อเว็บส่วนใหญ่เป็นข้อความ มีประโยชน์น้อยกว่าเมื่อเป็นพฤติกรรมเมื่อเราใช้องค์ประกอบต่างๆ ในการจัดวางการออกแบบ

การสร้างบริบทการจัดรูปแบบบล็อก

บริบทการจัดรูปแบบบล็อก (BFC) ใหม่จะป้องกันไม่ให้ระยะขอบยุบผ่านองค์ประกอบที่มีอยู่ หากเราดูตัวอย่างของเด็กคนแรกและคนสุดท้ายอีกครั้ง ซึ่งลงท้ายด้วยระยะขอบนอก wrapper และ display: flow-root ดังนั้นการสร้าง BFC ใหม่ ระยะขอบจะอยู่ภายใน

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ display: flow-root โปรดอ่านบทความเรื่อง "Understanding CSS Layout And The Block Formatting Context" การเปลี่ยนค่าของคุณสมบัติ overflow เป็น auto จะมีผลเช่นเดียวกัน เนื่องจากสิ่งนี้จะสร้าง BFC ใหม่ด้วย แม้ว่าอาจสร้างแถบเลื่อนที่คุณไม่ต้องการในบางสถานการณ์ได้เช่นกัน

คอนเทนเนอร์แบบยืดหยุ่นและแบบกริด

คอนเทนเนอร์แบบยืดหยุ่นและ แบบกริดจะสร้างบริบทการจัดรูปแบบแบบ ยืดหยุ่นและแบบกริดสำหรับลูกๆ ของตน ดังนั้นจึงมีพฤติกรรมที่แตกต่างกันในการบล็อกเลย์เอาต์ ความแตกต่างอย่างหนึ่งคือระยะขอบไม่ยุบ:

“คอนเทนเนอร์แบบยืดหยุ่นจะสร้างบริบทการจัดรูปแบบดิ้นใหม่สำหรับเนื้อหา สิ่งนี้เหมือนกับการสร้างบริบทการจัดรูปแบบบล็อก ยกเว้นว่าจะใช้เค้าโครงแบบยืดหยุ่นแทนเค้าโครงบล็อก ตัวอย่างเช่น ทุ่นลอยไม่บุกรุกเข้าไปในคอนเทนเนอร์แบบยืดหยุ่น และระยะขอบของคอนเทนเนอร์แบบยืดหยุ่นไม่ยุบกับระยะขอบของเนื้อหา”

— เฟล็กซ์บ็อกซ์ระดับ 1

หากเรานำตัวอย่างด้านบนมาสร้าง wrapper เป็นคอนเทนเนอร์แบบยืดหยุ่น โดยแสดงรายการด้วย flex-direction: column คุณจะเห็นว่ากระดาษห่อหุ้มอยู่ในขณะนี้ นอกจากนี้ ระยะขอบระหว่างรายการ flex ที่อยู่ติดกันจะไม่ยุบเข้าหากัน ดังนั้นเราจึงลงเอยด้วย 100 พิกเซลระหว่างรายการ flex ซึ่งรวมเป็น 50 พิกเซลที่ด้านบนและด้านล่างของรายการ

กลยุทธ์มาร์จิ้นสำหรับเว็บไซต์ของคุณ

เนื่องจากการยุบของระยะขอบ จึงเป็นความคิดที่ดีที่จะหาวิธีจัดการกับระยะขอบในไซต์ของคุณอย่างสม่ำเสมอ สิ่งที่ง่ายที่สุดที่จะทำคือกำหนดระยะขอบที่ด้านบน หรือ ด้านล่างขององค์ประกอบเท่านั้น ด้วยวิธีนี้ คุณไม่ควรพบปัญหาการยุบระยะขอบบ่อยเกินไป เนื่องจากด้านที่มีระยะขอบจะติดกับด้านที่ไม่มีระยะขอบเสมอ

หมายเหตุ : Harry Roberts มีโพสต์ที่ยอดเยี่ยมซึ่งมีรายละเอียดว่าเหตุใดการตั้งค่าระยะขอบในทิศทางเดียวเท่านั้นจึงเป็นความคิดที่ดี ไม่ใช่เพียงเพราะการแก้ปัญหาระยะขอบที่ยุบ

วิธีแก้ปัญหานี้ไม่ได้แก้ปัญหาที่คุณอาจพบกับระยะขอบของลูกที่ยุบผ่านผู้ปกครอง ปัญหาดังกล่าวมักไม่ค่อยเกิดขึ้น และการรู้ ว่าเหตุใด จึงเกิดขึ้นสามารถช่วยคุณหาทางแก้ไขได้ ทางออกที่ดีคือให้ส่วนประกอบที่ต้องการ display: flow-root เป็นทางเลือกสำหรับเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ overflow โฟลว์เพื่อสร้าง BFC เปลี่ยนพาเรนต์เป็นคอนเทนเนอร์แบบยืดหยุ่น หรือแม้แต่แนะนำช่องว่างภายในพิกเซลเดียว อย่าลืมว่าคุณสามารถใช้การสืบค้นข้อมูลคุณลักษณะเพื่อตรวจหาการสนับสนุนสำหรับการ display: flow-root ดังนั้นเฉพาะเบราว์เซอร์รุ่นเก่าเท่านั้นที่จะได้รับการแก้ไขที่เหมาะสมน้อยกว่า

โดยส่วนใหญ่แล้ว ฉันพบว่าการรู้ว่าเหตุใดระยะขอบจึงยุบ (หรือไม่หายไป) เป็นสิ่งสำคัญ จากนั้นคุณสามารถหาวิธีจัดการกับมันได้เป็นกรณี ๆ ไป สิ่งที่คุณเลือก อย่าลืมแชร์ข้อมูลนั้นกับทีมของคุณ บ่อยครั้งที่การยุบตัวของระยะขอบนั้นค่อนข้างลึกลับ ดังนั้นเหตุผลในการทำสิ่งต่าง ๆ เพื่อตอบโต้จึงอาจไม่ชัดเจน! ความคิดเห็นในโค้ดของคุณช่วยได้มาก คุณสามารถลิงก์ไปยังบทความนี้และช่วยแชร์ความรู้เรื่องการยุบขอบได้

ฉันคิดว่าฉันจะสรุปบทความนี้ด้วยข้อมูลอื่นๆ ที่เกี่ยวข้องกับระยะขอบ

อัตรากำไรขั้นต้น

เมื่อคุณใช้เปอร์เซ็นต์ใน CSS จะต้องเป็นเปอร์เซ็นต์ของบางอย่าง ระยะขอบ (และช่องว่างภายใน) ที่กำหนดโดยใช้เปอร์เซ็นต์จะเป็นเปอร์เซ็นต์ของขนาดอินไลน์ (ความกว้างในโหมดการเขียนแนวนอน) ของพาเรนต์เสมอ ซึ่งหมายความว่าคุณจะมีช่องว่างภายในขนาดเท่ากันรอบองค์ประกอบเมื่อใช้เปอร์เซ็นต์

ในตัวอย่าง CodePen ด้านล่าง ฉันมีแรปเปอร์ที่มีความกว้าง 200 พิกเซล ข้างในเป็นกล่องที่มีระยะขอบ 10% ระยะขอบคือ 20 พิกเซลทุกด้าน ซึ่งเท่ากับ 10% ของ 200

Margins In A Flow-Relative World

เราได้พูดถึงระยะขอบแนวตั้งตลอดบทความนี้ อย่างไรก็ตาม CSS สมัยใหม่มักจะคิดถึงสิ่งต่าง ๆ ในความสัมพันธ์ของโฟลว์มากกว่าที่จะพิจารณาทางกายภาพ ดังนั้น เมื่อเราพูดถึงระยะขอบแนวตั้ง เรากำลังพูดถึงระยะขอบในมิติบล็อกจริงๆ ระยะขอบเหล่านั้นจะอยู่บนและล่างหากเราอยู่ในโหมดการเขียนแนวนอน แต่จะไปทางขวาและซ้ายในโหมดการเขียนแนวตั้งที่เขียนจากซ้ายไปขวา

เมื่อทำงานกับตรรกะแล้ว ทิศทางสัมพันธ์ของโฟลว์ การพูดคุยเกี่ยวกับการเริ่มต้นบล็อกและจุดสิ้นสุดของบล็อกจะง่ายขึ้น แทนที่จะเป็นด้านบนและด้านล่าง เพื่อให้ง่ายขึ้น CSS ได้แนะนำคุณสมบัติตรรกะและคุณสมบัติค่า แผนที่นี้ไหลคุณสมบัติสัมพัทธ์ไปยังคุณสมบัติทางกายภาพ

สำหรับระยะขอบ จะทำให้เราได้การแมปต่อไปนี้ (หากเราทำงานเป็นภาษาอังกฤษหรือโหมดการเขียนแนวนอนอื่นๆ ที่มีทิศทางข้อความจากซ้ายไปขวา)

• margin-top = margin-block-start
• margin-right = margin-inline-end
• margin-bottom = margin-block-end
• margin-left = margin-inline-start

นอกจากนี้เรายังมีชวเลขใหม่สองแบบที่อนุญาตให้ตั้งค่าทั้งสองบล็อกในคราวเดียวหรือทั้งสองแบบในบรรทัด

• margin-block
• margin-inline

ในตัวอย่าง CodePen ถัดไป ฉันได้ใช้คำหลักที่เกี่ยวข้องกับโฟลว์เหล่านี้แล้วเปลี่ยนโหมดการเขียนของกล่อง คุณสามารถดูได้ว่าระยะขอบเป็นไปตามทิศทางของข้อความอย่างไร แทนที่จะผูกติดกับด้านบน ด้านขวา ด้านล่าง และด้านซ้าย

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติเชิงตรรกะและค่าบน MDN หรือในบทความของฉัน “การทำความเข้าใจคุณสมบัติและค่าตรรกะ” ที่นี่ใน Smashing Magazine

เพื่อสรุป

ตอนนี้คุณรู้มากที่สุดของสิ่งที่ต้องรู้เกี่ยวกับระยะขอบ! ในระยะสั้น:

• การยุบตัวของมาร์จิ้นเป็นเรื่องหนึ่ง การทำความเข้าใจว่าเหตุใดจึงเกิดขึ้นและเมื่อใดไม่เกิดขึ้นจะช่วยคุณแก้ปัญหาที่อาจเกิดขึ้น
• การตั้งค่าระยะขอบในทิศทางเดียวจะแก้ปัญหาเรื่องระยะขอบได้หลายอย่างเท่านั้น
• เช่นเดียวกับทุกอย่างใน CSS ให้แชร์การตัดสินใจของคุณกับทีม และแสดงความคิดเห็นโค้ดของคุณ
• การคิดเกี่ยวกับขนาดบล็อกและอินไลน์แทนที่จะเป็นด้านบน ขวา ล่าง และซ้ายจริงจะช่วยคุณในขณะที่เว็บเคลื่อนไปสู่โหมดการเขียนที่ไม่เชื่อเรื่องพระเจ้า