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