เมื่อจัดสไตล์เลย์เอาต์เว็บไซต์ระดับซับซ้อน (เกินกว่าเลย์เอาต์บทความง่ายๆ) สิ่งต่างๆ จะกลายเป็นความวุ่นวายอย่างรวดเร็ว ซึ่งมักนำไปสู่ปัญหาเลย์เอาต์หลากหลาย
ปัญหาเลย์เอาต์ CSS ที่พบบ่อยที่สุด ได้แก่:
- อีเลเมนต์ทับซ้อนกัน (มักเป็นปัญหา overflow)
- อีเลเมนต์หดห่อ (มักเป็นปัญหา margin)
- ช่องว่างสีขาวเกิน (หลายสาเหตุทำให้เกิด)
วิธีง่ายๆ เพื่อให้ได้ visual cue ทันทีเกี่ยวกับปัญหาเลย์เอาต์ คือเพิ่ม border รอบอีเลเมนต์ HTML ทั้งหมด โดยใช้ universal selector * ของ CSS
เพิ่มโค้ดนี้ที่ด้านบนสุดของ stylesheet:
* { border: 1px solid red; }ผ่านลองทำบนเว็บของตัวเองและทันทีก็เห็นว่าเลย์เอาต์ต้องปรับปรุง
แม้เลย์เอาต์ของคุณจะไม่มีปัญหาที่มองเห็นได้ วิธี border นี้ก็ช่วยเผยโครงสร้างที่อาจนำไปสู่ปัญหาในอนาคต
แก้ไขเพิ่มเติม
สามารถทำได้ด้วยคุณสมบัติ outline แทน border ซึ่งอาจดีกว่า เพราะ outline ไม่佔พื้นที่ (doesn't take up space) จึงไม่กระทบเลย์เอาต์
