การใช้งาน CSS Height Width

CSS height และ width เป็นคุณสมบัติที่ใช้ในการกำหนดขนาดขององค์ประกอบ (elements) บนหน้าเว็บ โดยจะควบคุมความสูงและความกว้างของกล่อง (box) ขององค์ประกอบต่างๆ เช่น <div>, <img>, <p>, ฯลฯ

Width (ความกว้าง)

width ใช้ในการกำหนดความกว้างขององค์ประกอบ โดยค่าเริ่มต้นจะไม่รวม padding, border, และ margin หากไม่ได้กำหนด box-sizing: border-box;

รูปแบบทั่วไป

.element {
  width: 300px;
}

หน่วยที่ใช้

• px (พิกเซล) เป็นหน่วยที่ใช้บ่อยที่สุด มีความแม่นยำในระดับหน้าจอ
• % (เปอร์เซ็นต์) ใช้ในการกำหนดความกว้างเป็นเปอร์เซ็นต์ของพ่อแม่ (parent element)
• vw (viewport width) อ้างอิงตามความกว้างของ viewport
• em หรือ rem อ้างอิงตามขนาดฟอนต์ปัจจุบัน

ตัวอย่างการใช้

.container {
  width: 50%; /* ครึ่งหนึ่งขององค์ประกอบพ่อแม่ */
}

.fixed-width {
  width: 500px; /* กำหนดความกว้างคงที่ 500 พิกเซล */
}

Height (ความสูง)

height ใช้ในการกำหนดความสูงขององค์ประกอบ ขึ้นอยู่กับเนื้อหาภายใน โดยค่าเริ่มต้นองค์ประกอบหลายอย่างเช่น <div> จะปรับความสูงตามเนื้อหาภายใน

รูปแบบทั่วไป

.element {
  height: 200px;
}

หน่วยที่ใช้

• px ความสูงในหน่วยพิกเซล
• % กำหนดความสูงเป็นเปอร์เซ็นต์ของพ่อแม่
• vh (viewport height) อ้างอิงตามความสูงของ viewport
• em, rem อ้างอิงตามขนาดของฟอนต์

ตัวอย่างการใช้

.box {
  height: 100vh; /* ใช้ความสูงเต็มของ viewport */
}

.auto-height {
  height: auto; /* ให้ความสูงปรับตามเนื้อหาภายใน */
}

Box-Sizing (การนับรวม padding และ border)

โดยค่าเริ่มต้น เมื่อกำหนด width หรือ height ขององค์ประกอบจะไม่รวม padding และ border เข้าด้วยกัน แต่สามารถเปลี่ยนการทำงานนี้ด้วย box-sizing

.element {
  box-sizing: border-box;
  width: 300px; /* กว้าง 300px รวม padding และ border แล้ว */
  padding: 20px;
  border: 5px solid #000;
}

Min-Width, Min-Height, Max-Width, Max-Height

นอกจาก width และ height เรายังสามารถใช้ min- และ max- เพื่อกำหนดขนาดขั้นต่ำและขนาดสูงสุดขององค์ประกอบได้

ตัวอย่าง

.element {
  min-width: 200px; /* ขนาดขั้นต่ำ */
  max-width: 1000px; /* ขนาดสูงสุด */
  min-height: 100px;
  max-height: 500px;
}

การคำนวณขนาดด้วย calc()

CSS รองรับการคำนวณขนาดได้ด้วยฟังก์ชัน calc() ซึ่งสามารถผสมหน่วยต่างๆ เข้าด้วยกัน เช่น การหักลบหรือบวกขนาดได้

ตัวอย่าง

.element {
  width: calc(100% - 50px); /* ลดขนาด 50px จากขนาดเต็ม */
  height: calc(100vh - 100px); /* ลดความสูงจาก viewport 100px */
}

การปรับใช้กับ Layout Responsive

การใช้หน่วย vw, vh, %, และฟังก์ชัน calc() มักนิยมใช้ในการออกแบบเว็บไซต์แบบ responsive ที่ปรับให้เข้ากับขนาดหน้าจอต่างๆ

ตัวอย่าง

.responsive-box {
  width: 50vw; /* ความกว้างครึ่งหนึ่งของ viewport */
  height: 30vh; /* ความสูง 30% ของ viewport */
}

สรุป

• width และ height ใช้กำหนดขนาดขององค์ประกอบ
• สามารถใช้หน่วยพิกเซล, เปอร์เซ็นต์, และหน่วยอื่นๆ ในการกำหนดขนาด
• ใช้ box-sizing: border-box; เพื่อรวม padding และ border เข้ากับขนาดที่กำหนด
• ใช้ min- และ max- เพื่อกำหนดขนาดขั้นต่ำและขนาดสูงสุด
• ใช้ calc() เพื่อคำนวณขนาดแบบยืดหยุ่น