CSS ความสูงและความกว้าง

ความกว้างขององค์ประกอบนี้คือ 100%。

CSS ตั้งค่าความสูงและความกว้าง

height และ width มีความหมายในการตั้งค่าความสูงและความกว้างขององค์ประกอบ

height และ width ไม่รวมความหน้าในตรงที่มีขอบเขตด้านในขององค์ประกอบ! มันกำหนดความสูง/ความกว้างขององค์ประกอบด้านในของขอบเขตด้านนอกขององค์ประกอบ

ค่า CSS ความสูงและความกว้าง

height และ width มีค่าที่สามารถตั้งค่าได้ตามนี้:

  • auto - ค่าเริ่มต้น。บราวเซอร์คำนวณความสูงและความกว้าง
  • length - กำหนดความสูง/ความกว้างด้วยค่าของความยาว (เช่น px, cm และค.ล.)
  • % - กำหนดความสูง/ความกว้างด้วยเปอร์เซ็นต์ของเอกบล็อค
  • initial - ตั้งค่าความสูง/ความกว้างเป็นค่าเริ่มต้น
  • inherit - สืบทอดความสูง/ความกว้างจากค่าของพ่อของมัน

ตัวอย่าง CSS ความสูงและความกว้าง

ความสูงขององค์ประกอบนี้คือ 200 พิกเซล และความกว้างคือ 50%

ตัวอย่าง

ตั้งค่าความสูงและความกว้างขององค์ประกอบ <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

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

ความสูงขององค์ประกอบนี้คือ 100 พิกเซล และความกว้างคือ 500 พิกเซล。

ตัวอย่าง

ตั้งค่าความสูงและความกว้างขององค์ประกอบ <div> อื่นๆ:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

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

หมายเหตุ：จำเป็นต้องจำไว้ว่าheight และ width ไม่รวมความหน้าในตรงที่มีขอบเขตด้านในขององค์ประกอบ! มันกำหนดความสูง/ความกว้างขององค์ประกอบด้านในของขอบเขตด้านนอกขององค์ประกอบ

ตั้งค่า max-width

max-width มีความหมายในการตั้งค่าความกว้างสูงสุดขององค์ประกอบ

สามารถกำหนด max-width (ความกว้างสูงสุด) ด้วยค่าของความยาว (เช่น px, cm และค.ล.) หรือสัดส่วนของเปอร์เซ็นต์ของเอกบล็อค (％) หรือกำหนดเป็น none (ค่าเริ่มต้น หมายถึงไม่มีความกว้างสูงสุด)

เมื่อหน้าต่างบราวเซอร์เล็กกว่าความกว้างขององค์ประกอบ (500px) จะเกิดเหตุการณ์ที่เรียกว่า <div> ของปัญหา หลังจากนั้นบราวเซอร์จะเพิ่มลูกศนามุมตรงแนวนอนของหน้าเว็บ

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

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

ความสูงขององค์ประกอบนี้คือ 100 พิกเซล และความกว้างสูงสุดคือ 500 พิกเซล。

ความสูงขององค์ประกอบนี้คือ 100 พิกเซล และความกว้างสูงสุดคือ 500 พิกเซล。

หมายเหตุ：max-width ค่าของอุปกรณ์นี้จะทำให้ลบค่าอุปกรณ์ที่มีอยู่แล้ว width（ความกว้าง）。

ตัวอย่าง

ความสูงขององค์ประกอบ <div> นี้คือ 100 พิกเซล และความกว้างสูงสุดคือ 500 พิกเซล:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

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

ตัวอย่างเพิ่มเติม

ตั้งค่าความสูงและความกว้างขององค์ประกอบ
นี้เป็นตัวอย่างแสดงวิธีการตั้งค่าความสูงและความกว้างขององค์ประกอบต่างๆ
ตั้งค่าความสูงและความกว้างของภาพด้วยเปอร์เซ็นต์
นี้เป็นตัวอย่างแสดงวิธีการใช้สัดส่วนเปอร์เซ็นต์ตั้งค่าความสูงและความกว้างของภาพ
ตั้งค่าความกว้างขององค์ประกอบสูงสุดและต่ำสุด
นี้เป็นตัวอย่างแสดงวิธีการใช้ค่าพิกเซลตั้งค่าความกว้างขององค์ประกอบสูงสุดและต่ำสุดขององค์ประกอบ
ตั้งความสูงที่ต่ำที่สุดและสูงที่สุดขององค์ประกอบ
ตัวอย่างนี้แสดงวิธีการใช้ค่าพิกเซลเพื่อตั้งความสูงที่ต่ำที่สุดและสูงที่สุดขององค์ประกอบ

ตั้งความขนาด CSS

แอตทริบิวต์ คำอธิบาย
height ตั้งความสูงขององค์ประกอบ
max-height ตั้งความสูงขององค์ประกอบที่สูงที่สุด
max-width ตั้งความกว้างขององค์ประกอบที่สูงที่สุด
min-height ตั้งความสูงขององค์ประกอบที่ต่ำที่สุด
min-width ตั้งความกว้างขององค์ประกอบที่ต่ำที่สุด
width ตั้งความกว้างขององค์ประกอบ