การใช้ความกว้างความกว้างสูงสุดและ margin: auto;
ตามที่กล่าวไว้ในบทก่อนหน้า; องค์ประกอบระดับบล็อกมักจะขึ้นเต็มความกว้างใช้ได้ (เหยียดออกไปทางซ้ายและขวาเท่าที่จะสามารถทำได้)
การตั้งค่า width ขององค์ประกอบระดับบล็อกจะป้องกันไม่ให้มันยืดออกไปถึงขอบของภาชนะของตน จากนั้นคุณสามารถตั้งค่าระยะขอบอัตโนมัติเพื่อแนวนอนศูนย์องค์ประกอบภายในภาชนะที่ใช้บรรจุ องค์ประกอบที่จะใช้ความกว้างที่ระบุและพื้นที่ที่เหลือจะถูกแบ่งเท่า ๆ กันระหว่างสองอัตรากำไรขั้นต้น:
หมายเหตุ: ปัญหาเกี่ยวกับเดอะ <div> ดังกล่าวเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์ที่มีขนาดเล็กกว่าความกว้างขององค์ประกอบ เบราว์เซอร์แล้วเพิ่มแถบเลื่อนแนวนอนไปยังหน้า
การใช้ max-width แทนในสถานการณ์เช่นนี้จะปรับปรุงการจัดการเบราว์เซอร์ของหน้าต่างขนาดเล็ก นี้เป็นสิ่งสำคัญเมื่อทำเว็บไซต์ใช้งานได้บนอุปกรณ์ขนาดเล็ก:
เคล็ดลับ: การปรับขนาดหน้าต่างเบราว์เซอร์ให้น้อยกว่า 500px กว้างเพื่อที่จะเห็นความแตกต่างระหว่างสอง divs!
นี่คือตัวอย่างของทั้งสอง divs เหนือ:
ตัวอย่าง
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} ลองตัวเอง»