คุณเคยเจอปัญหานี้บ้างไหม ปัญหาที่ตัวอักษรชิดรูปเกินไปดูไม่สวย จะเคาะ (spec bar) เท่าไหนมันก็ไม่ยอมออกจากกันสักทีปัญหานี้แก้ง่าย ๆ ด้วย css

โดยการใช้ padding เพื่อกำหนด ให้เว้นขอบรอบ ๆ img

1
2
3

img {
  padding: 10px;
}

padding: 10px; จากคำสั่งกำหนดให้ระยะห่างรอบ ๆ ที่ 10px หรือจะกำหนดเป็น เปอร์เซ็นต์ก็ได้ เช่น padding: 5%;

หรือจะกำหนดเฉพาะด้าน เช่น

padding-bottom: ด้านล่าง

padding-left: ด้านซ้าย

padding-right: ด้านขวา

padding-top: ด้านบน

หรือจะเขียนให้สั้นลงเพื่อให้อ่านได้เร็วขึ้นโหลดหน้าเพจให้เร็วขึ้น เช่น

padding: 10px; เป็นการกำหนดให้เว้นระยะห่าง บน ขวา ล่าง ซ้าย (หมุนตามเข็มนาฬิกา) ที่ 10px

padding: 10px 0 10px 0; เป็นการกำหนดเว้นระยะห่าง บน 10px, ขวา 0px, ล่าง 10px, ซ้าย 0px

ก็จะได้ระยะห่างตามต้องการ

จะใช้ padding หรือ margin ก็ได้ดูตารูปแบบที่เหมาะสม