เมื่อออกแบบหน้าเว็บ คุณมักต้องกำหนดขนาดเฉพาะให้องค์ประกอบ เช่น กล่องความสูงเท่าไหร่ หรือข้อความกว้างเท่าไหร่
นั่นคือที่มาของคุณสมบัติ CSS height และ width ใช้กำหนดความสูงและความกว้างขององค์ประกอบ
บทเรียนนี้อธิบายพื้นฐาน height/width properties และ min/max properties สำหรับ responsive elements จนจบคุณจะใช้ height/width อย่างเชี่ยวชาญ
CSS Height และ Width Properties
การตั้งค่าความสูง/กว้างช่วยกำหนดพื้นที่ที่องค์ประกอบจะครอบครอง ช่วยพัฒนาโครงสร้างให้แต่ละองค์ประกอบแสดงถูกต้อง
ใช้ width (แนวนอน) และ height (แนวตั้ง) สำหรับ content area ของกล่อง — ไม่รวม margins หรือ padding
Syntax:
height: heightValue; width: widthValue;ค่าที่รับได้:
auto— เบราว์เซอร์คำนวณอัตโนมัติlength— px, em, rem เป็นต้นpercentage— เปอร์เซ็นต์ของบล็อกพาเรนต์initial— ค่าเริ่มต้นinherit— สืบทอดจากพาเรนต์
ตัวอย่าง: กล่อง About Us คาเฟ่
คาเฟ่ "The Pickled Apple" ต้องการกล่องบนหน้า About กว้าง 200px สูง 200px พื้นหลังสีเทาอ่อน
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois...</p>
</html>
<style>
.aboutBox {
height: 200px;
width: 200px;
background-color: lightgray;
}
</style>
เปลี่ยน width เป็น 100px หรือ height เป็น 300px ได้ตามต้องการ
CSS Min และ Max Length Properties (Responsive Sizing)
Width/height เป็นค่าคงที่ ไม่เปลี่ยนเมื่อ resize หน้าจอหรือดูอุปกรณ์ต่างๆ (เว้นแต่ใช้ค่า relative เช่น percentage)
สำคัญสำหรับ accessibility: กำหนด width 500px อาจแสดงผิดบนมือถือที่จอเล็กกว่า
ใช้ min-width, max-width, min-height, max-height ทำให้องค์ประกอบปรับตัวตามขนาดจอ ค่าที่ระบุจะ override width/height
min-height— ความสูงขั้นต่ำ (ไม่ต่ำกว่านี้)min-width— ความกว้างขั้นต่ำmax-height— ความสูงสูงสุดmax-width— ความกว้างสูงสุด
ตัวอย่าง: กล่องปรับขนาดตามจอ
กล่องกว้างสูงสุด 500px แคบสุด 100px
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois...</p>
</html>
<style>
.aboutBox {
max-width: 500px;
min-width: 100px;
background-color: lightgray;
}
</style>ขนาดกล่องเปลี่ยนตาม browser window แตกกว้างกว่า 500px ไม่ได้ แคบกว่า 100px ไม่ได้
สรุป
CSS height และ width กำหนดขนาดองค์ประกอบ แตเป็นค่าคงที่ หากต้องการปรับตามขนาดจอ ใช้ min-height, min-width, max-height, max-width ตอนนี้คุณพร้อมใช้ height/width properties อย่างเชี่ยวชาญ!
