จัดตำแหน่งข้อความและ select box ให้กว้างเท่ากันด้วย HTML และ CSS

เมื่อเราตั้งค่าความกว้างและความสูงขององค์ประกอบใน CSS บ่อยครั้งองค์ประกอบจะดูใหญ่กว่าขนาดจริง เนื่องจากค่าเริ่มต้น padding และ border จะถูกเพิ่มเข้าไปในความกว้างและความสูงขององค์ประกอบก่อน แล้วจึงแสดงผล

คุณสมบัติ box-sizing รวม padding และ border ขององค์ประกอบเข้ากับความกว้างและความสูงจริง ทำให้องค์ประกอบไม่ดูใหญ่กว่าขนาดจริง รูปแบบการใช้คือ box-sizing: border-box

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อจัดตำแหน่งข้อความและ select box ให้กว้างเท่ากัน:

<html>
  <head>
    <style>
      input, select {
        width: 250px;
        border: 2px solid #000;
        padding: 0;
        margin: 0;
        height: 22px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      input {
        text-indent: 3px;
      }
    </style>
  </head>
  <body>
    <input type="text" value="Name of Candidate"><br>
    <select>
      <option>Select Choice</option>
      <option>Student</option>
      <option>Teachers</option>
      <option>Head</option>
    </select>
  </body>
</html>