Warning: file_get_contents(/home/gcms/public_html/skin/datas/users/goro/skin/2017/amp.css): failed to open stream: No such file or directory in /home/gcms/public_html/Gcms/Amp.php on line 32
การแก้ไขเมื่อมีช่องว่างระหว่าง element

GORAGOD

การแก้ไขเมื่อมีช่องว่างระหว่าง element

หลายๆคนอาจเจอปัญหากำหนดค่า 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;
}