CATEGORY ARCHIVES: RESPONSIVE DESIGN
คำสั่ง CSS สำคัญสำหรับการเขียนเว็บ Responsive
30
AUG
รวมคำสั่ง CSS ที่จำเป็นสำหรับการสร้างเว็บไซต์ที่รองรับทุกขนาดหน้าจอ เริ่มจาก media queries, flexbox, grid layout และเทคนิคการใช้ viewport units เพื่อให้เว็บของคุณดูดีในทุกอุปกรณ์ …
| read moreCATEGORY ARCHIVES: CSS DISPLAY PROPERTY
เปรียบเทียบ display: block vs inline-block
28
AUG
ตารางด้านล่างแสดงความแตกต่างระหว่าง display: block และ display: inline-block เพื่อช่วยให้เข้าใจการเลือกใช้ display property ที่เหมาะสม
| คุณสมบัติ | display: block | display: inline-block |
|---|---|---|
| การจัดเรียงองค์ประกอบ | 📦 แต่ละตัวอยู่บรรทัดใหม่ | ✅ เรียงต่อกันในบรรทัดเดียว |
| ความกว้างเริ่มต้น | ❌ กินพื้นที่เต็มความกว้าง (100%) | ✅ ตามเนื้อหาภายใน (auto) |
| การกำหนด width และ height | ✅ กำหนดได้ทั้ง width และ height | ✅ กำหนดได้ทั้ง width และ height |
| margin และ padding | ✅ ใช้ได้ครบทุกทิศทาง | ✅ ใช้ได้ครบทุกทิศทาง |
| vertical-align | ❌ ไม่มีผลกับ block element | ✅ สามารถใช้ได้ (top, middle, bottom) |
| ช่องว่างระหว่างองค์ประกอบ | 🚫 ไม่มีปัญหาช่องว่าง | ❌ มีช่องว่างจาก whitespace ใน HTML |
| การใช้งานที่เหมาะสม | 📄 div, section, header, footer | 🎯 navigation menu, button groups |