การกำหนดขนาด (Width & Height)

การกำหนดขนาด (Width & Height)

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ CSS Box Model ซึ่งเป็นพื้นฐานสำคัญในการจัด Layout ใน CSS ในบทนี้ เราจะมาเจาะลึกถึงการกำหนดขนาดของ Element ต่างๆ บนหน้าเว็บของเรา โดยใช้ Properties width และ height

ความสำคัญของการกำหนดขนาด

การกำหนดขนาดที่เหมาะสมให้กับ Element เป็นสิ่งสำคัญอย่างยิ่งในการสร้าง Layout ที่สวยงามและใช้งานง่าย การกำหนดขนาดที่ไม่ถูกต้องอาจทำให้ Element เหลื่อมกัน, ล้นออกมานอก Container หรือดูไม่สมส่วนกับส่วนอื่นๆ ของหน้าเว็บ

Properties: width และ height

width และ height เป็น Properties ที่ใช้สำหรับกำหนดความกว้างและความสูงของ Element ตามลำดับ

.my-element {
  width: 200px; /* กำหนดความกว้างเป็น 200 pixels */
  height: 100px; /* กำหนดความสูงเป็น 100 pixels */
}

จากตัวอย่างด้านบน Element ที่มี Class my-element จะมีความกว้าง 200 pixels และความสูง 100 pixels

หน่วยวัด (Units) ที่ใช้กับ width และ height

เราสามารถกำหนดขนาดโดยใช้หน่วยวัดที่หลากหลาย ซึ่งแต่ละหน่วยก็มีลักษณะการใช้งานที่แตกต่างกัน:

• px (Pixels): เป็นหน่วยวัดที่แน่นอน เหมาะสำหรับกำหนดขนาดที่ต้องการความแม่นยำ
• em: เป็นหน่วยวัดที่สัมพันธ์กับขนาด Font ของ Element ปัจจุบัน ตัวอย่างเช่น 1em จะเท่ากับขนาด Font ของ Element นั้นๆ
• rem: คล้ายกับ em แต่ rem จะสัมพันธ์กับขนาด Font ของ Root Element (โดยปกติคือ <html> tag)
• %: เป็นหน่วยวัดที่แสดงเป็นเปอร์เซ็นต์ของขนาด Container Element

ตัวอย่างการใช้งานหน่วยวัดต่างๆ

.element-px {
  width: 300px; /* ความกว้าง 300 pixels */
}

.element-em {
  font-size: 16px; /* กำหนดขนาด font ให้ element นี้ */
  width: 10em; /* ความกว้าง 10 เท่าของขนาด font (10 * 16px = 160px) */
}

.element-rem {
  width: 20rem; /* ความกว้าง 20 เท่าของขนาด font ของ root element */
}

.container {
  width: 500px;
}

.element-percent {
  width: 50%; /* ความกว้าง 50% ของ container (50% ของ 500px = 250px) */
}

ข้อควรจำ: การเลือกหน่วยวัดที่เหมาะสมขึ้นอยู่กับความต้องการของ Layout และความยืดหยุ่นที่ต้องการ หากต้องการขนาดที่แน่นอน px อาจเป็นตัวเลือกที่ดี แต่หากต้องการให้ Element ปรับขนาดตามขนาด Font หรือ Container em, rem หรือ % อาจเหมาะสมกว่า

min-width และ max-width

นอกจาก width แล้ว เรายังมี min-width และ max-width ที่ช่วยให้เรากำหนดขนาดขั้นต่ำและขนาดสูงสุดของ Element ได้

• min-width: กำหนดความกว้างขั้นต่ำของ Element Element จะไม่แคบไปกว่าค่าที่กำหนด
• max-width: กำหนดความกว้างสูงสุดของ Element Element จะไม่กว้างไปกว่าค่าที่กำหนด

ตัวอย่างการใช้งาน min-width และ max-width

.box {
  width: 100%; /* กำหนดความกว้างให้เต็ม Container */
  min-width: 300px; /* แต่ต้องมีขนาดอย่างน้อย 300px */
  max-width: 600px; /* และไม่เกิน 600px */
}

จากตัวอย่างด้านบน Element ที่มี Class box จะมีความกว้าง 100% ของ Container แต่จะไม่แคบไปกว่า 300px และจะไม่กว้างไปกว่า 600px ทำให้ Element มีความยืดหยุ่น แต่ยังคงขนาดที่เหมาะสม

min-height และ max-height

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

• min-height: กำหนดความสูงขั้นต่ำของ Element Element จะไม่เตี้ยไปกว่าค่าที่กำหนด
• max-height: กำหนดความสูงสูงสุดของ Element Element จะไม่สูงไปกว่าค่าที่กำหนด

ตัวอย่างการใช้งาน min-height และ max-height

.content-box {
  min-height: 200px; /* กำหนดความสูงขั้นต่ำเป็น 200px */
  max-height: 400px; /* กำหนดความสูงสูงสุดเป็น 400px */
  overflow: auto; /* หากเนื้อหาล้น ให้แสดง Scrollbar */
}

จากตัวอย่างด้านบน Element ที่มี Class content-box จะมีความสูงอย่างน้อย 200px และไม่เกิน 400px หากเนื้อหาภายใน Element มีความสูงเกิน 400px จะมี Scrollbar ปรากฏขึ้น (เนื่องจาก overflow: auto;)

การใช้งานจริง

ลองพิจารณาตัวอย่าง HTML และ CSS ด้านล่าง:

<div class="container">
  <div class="box">
    <p>This is a box with a fixed width and height.</p>
  </div>
</div>

.container {
  width: 500px;
  margin: 20px auto;
  border: 1px solid #ccc;
}

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #999;
}

ในตัวอย่างนี้ เรามี Container ที่มีความกว้าง 500px และมี Element box อยู่ภายใน โดย box มีความกว้าง 200px และความสูง 100px

ลองแก้ไข CSS เพื่อทดลองใช้หน่วยวัดต่างๆ, min-width, max-width, min-height และ max-height เพื่อทำความเข้าใจการทำงานของ Properties เหล่านี้ให้ดียิ่งขึ้น

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการกำหนดขนาดของ Element ด้วย width และ height รวมถึงหน่วยวัดที่ใช้บ่อย และการใช้ min-width, max-width, min-height และ max-height เพื่อควบคุมขนาดของ Element ให้มีความยืดหยุ่นและเหมาะสมกับ Layout ของเรา การเข้าใจและใช้งาน Properties เหล่านี้เป็นสิ่งสำคัญอย่างยิ่งในการสร้าง Layout ที่สวยงามและใช้งานง่าย

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการจัดการสี (Color & Background) เพื่อให้เว็บไซต์ของเรามีสีสันที่สวยงามและน่าสนใจยิ่งขึ้น