[CSS] การเปรียบเทียบระหว่างความกว้าง 100% กับ 50% | วิธีใช้ w-100

คู่มือนี้เปรียบเทียบระหว่าง width: 100%; กับ width: 50%; พร้อมอธิบายว่าแต่ละแบบเหมาะกับสถานการณ์แบบใด

🔹 โค้ดบางส่วน

<div class="w-100">
  องค์ประกอบที่ตั้งค่าความกว้าง 100%
</div>

<style>
.w-100 {
  width: 100%;
}
</style>

💻 โค้ดทำงานได้ทันที (เพียงคัดลอกแล้ววางใน HTML)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>การเปรียบเทียบความกว้าง 100% กับ 50%</title>
  <style>
    .w-100 {
      width: 100%;
      background-color: #90EE90;
      padding: 1rem;
    }
    .w-50 {
      width: 50%;
      background-color: #ADD8E6;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div class="w-100">องค์ประกอบที่ตั้งค่าความกว้าง 100%</div>
  <div class="w-50">องค์ประกอบที่ตั้งค่าความกว้าง 50%</div>
</body>
</html>

🧩 การประยุกต์ใช้และกรณีใช้งาน

width: 100%; เป็นวิธีพื้นฐานที่สุดในการทำให้ขนาดองค์ประกอบยืดตามความกว้างขององค์ประกอบแม่ เหมาะมากกับดีไซน์แบบ responsive

ส่วน width: 50%; จะใช้ในกรณีที่ต้องการจัดองค์ประกอบเรียงกันสองคอลัมน์

📚 การใช้คุณสมบัติ width อย่างมีประสิทธิภาพ

คุณสมบัติ width ใน CSS ควบคุมความกว้างขององค์ประกอบ ซึ่ง % และ px มีพฤติกรรมแตกต่างกันโดยสิ้นเชิง

🔍 ข้อดีของการใช้ % ในดีไซน์ responsive

width: 100%; มีประโยชน์อย่างมากกับดีไซน์ responsive เพราะปรับตามขนาดขององค์ประกอบแม่ (มักจะเป็น viewport) เหมาะกับอุปกรณ์หลากหลาย

📊 การใช้ในเลย์เอาต์แบบหลายคอลัมน์

width: 50%; เหมาะกับเลย์เอาต์แบบ 2 คอลัมน์ แต่ควรใช้ร่วมกับ display: inline-block, float, หรือ Flexbox/Grid เพื่อไม่ให้องค์ประกอบเรียงซ้อนแนวตั้ง

ข้อควรระวังคือ % จะไม่รวม padding และ border ถ้าใช้ box-sizing: border-box จะช่วยให้จัดการขนาดได้ง่ายขึ้น

คัดลอกแล้ว!