CSS Layout — width and max-width

เกี่ยวกับ ความกว้าง และ ความกว้างสูงสุด

Using width, max-width and margin: auto;

การใช้ความกว้าง , ความกว้างสูงสุด และ ระยะขอบอัตโนมัติ

CSS

div.ex1 {
  width: 2000px;  //ความกว้าง
  margin: auto;   //ระยะขอบอัตโนมัติ
  border: 3px solid rgb(4, 4, 4);  //ขนาดเส้นขอบ รูปแบบ สีเส้นขอบ
}

div.ex2 {
  max-width: 2000px;   //ความกว้าง
  margin: auto;     //ระยะของอัตโนมัติ
  border: 3px solid rgb(4, 4, 4);   //ขนาดเส้นขอบ รูปแบบ สีเส้นขอบ
}

HTML

<div class="container">
   <div class="ex1">This div element has width: 2000px;</div><br>
   <div class="ex2">This div element has max-width: 2000px;</div>
   <p>
      <strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between the two divs!
   </p>
</div>

Using width, max-width and margin: auto;

จากภาพจะเห็นได้ว่า จำนวนกว้างที่เท่ากัน แต่ภาพที่ได้ต่างกัน เรากำหนด width : 2000px; ความกว้างจากซ้ายไปขวา และหลุดออกไปเลย . ส่วนที่กำหนด max-width: 2000px; จะมีความกว้างเต็มที่เท่าที่พื้นที่กำหนดไว้