ตามที่กล่าวไว้ในบทที่แล้ว องค์ประกอบระดับบล็อกจะใช้ความกว้างเต็มที่มีอยู่เสมอ (ยืดออกไปซ้ายและขวาเท่าที่จะทำได้)
การตั้งค่า width ขององค์ประกอบระดับบล็อกจะป้องกันไม่ให้ยืดออก ออกไปถึงขอบภาชนะ จากนั้นคุณสามารถตั้งค่า ระยะขอบเป็นอัตโนมัติ เพื่อจัดองค์ประกอบให้อยู่กึ่งกลางภายในคอนเทนเนอร์ตามแนวนอน ที่ องค์ประกอบจะใช้ความกว้างที่ระบุ และพื้นที่ที่เหลือจะถูกแบ่ง เท่า ๆ กันระหว่างระยะขอบทั้งสอง:
หมายเหตุ: ปัญหาเกี่ยวกับ <div> ด้านบนเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์ถูก เล็กกว่าความกว้างของ องค์ประกอบ เบราว์เซอร์จะเพิ่มแถบเลื่อนแนวนอนให้กับเพจ
การใช้ max-width แทน ในสถานการณ์นี้ จะช่วยปรับปรุง การจัดการหน้าต่างเล็ก ๆ ของเบราว์เซอร์ นี่เป็นสิ่งสำคัญเมื่อทำให้ไซต์ใช้งานได้ บนอุปกรณ์ขนาดเล็ก:
เคล็ดลับ: ปรับขนาดหน้าต่างเบราว์เซอร์ให้กว้างน้อยกว่า 500px เพื่อดูความแตกต่างระหว่าง ทั้งสอง div!
นี่คือตัวอย่างของ div สองตัวด้านบน:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>