סידור אלמנטים בCSS

[גמליאל]

יש לי div אב, המכיל למשל 4 divים ילדים וכל ילד מוגדר על רוחב של 25%
הייתי מצפה שכולם יכנסו בשורה אחת (הילדים הוגדרו כ inline), אך בפועל יש כאן איזה רווח שאני לא מצליח להתפטר ממנו שגונב שטח (וזה לא border כי אין להם כזה), מה שגורם תמיד לdiv האחרון לרדת לשורה הבאה.
הנה זה:
https://jsfiddle.net/c7a85js2/1/

למה זה?

[איש נחמד]

@גמליאל אמר בסידור אלמנטים בCSS:

למה זה?

זאת תוצאה של שימוש ב-inline:
https://stackoverflow.com/questions/1833734/display-inline-block-extra-margin
https://stackoverflow.com/a/5078297/11675758

הסרת הרווחים בקוד תסיר אותם גם בתצוגה:

<div class="fathr">
  <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div>

[zvizvi]

או לחלופין, להגדיר את ההורה כ flex או inline-flex.