การจัดเรียง CSS - width และ max-width

ใช้ width, max-width และ margin: auto;

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

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

ความกว้างขององค์ประกอบ <div> คือ 500px และมี margin จัดการเป็น auto。

注意：เมื่อขนาดหน้าต่างบราวเซอร์เล็กกว่าความกว้างขององค์ประกอบ <div> จะเกิดปัญหา โดยเบราวเซอร์จะเพิ่มลูกศรหลายขอบเขตที่ระบุในหน้าเว็บ

ในกรณีนี้ การใช้ max-width นี่สามารถช่วยปรับปรุงการจัดการกับหน้าต่างเล็กของเบราวเซอร์ ซึ่งมีความสำคัญสำหรับการทำให้เว็บไซต์สามารถใช้งานบนอุปกรณ์เล็ก:

เครื่องมือ <div> มีความกว้างสูงสุด 500px และมี margin จัดตั้งเป็น auto。

คำเตือน:กรุณาปรับขนาดหน้าต่างบราวเซอร์เล็กกว่า 500 พิกเซล เพื่อดูความแตกต่างระหว่าง div สองตัว!

นี่คือตัวอย่างของ div สองตัวที่อยู่ด้านบน:

ตัวอย่าง

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

ทดลองด้วยตัวเอง