หลายๆคนอาจเจอปัญหากำหนดค่า inline หรือ inline-block ให้กับ element แล้ว เกิดช่องว่างที่ไม่ต้องการขึ้นมา ทำให้ element ไม่เรียงชิดติดกันตามที่ต้องการ ผมมีคำตอบของปัญหานี้ครับ
 

<style>
img {
  display: inline; /* หรือ inline-block */
}
</style>
<img src=.......>
<img src=........>

ปัญหานี้เกิดจากการที่มีตัวอักษรขึ้นบรรทัดใหม่ครับทำให้บราวเซอร์เว้นช่องว่างเล็กน้อยอันเนื่องมาจากข้อความขึ้นบรรทัดใหม่นั้นเอง สามารถแก้ไขได้ดังนี้

วิธีแรก เมื่อปัญหามันคือตัวอักษรขึ้นบรรทัดใหม่ ก็สามารถเขียนโค้ดใหม่โดยเรียง element ต่อๆกันไปโดยไม่ต้องขึ้นบรรทัดใหม่ เช่น

<img src=.......><img src=........>

วิธีที่ 2 สามารถกำหนด float: left ให้กับ element แทน display: inline ครับ

img {
  float: left;
}