There was a question in one of my Slack channels today. A developer was trying to display two elements horizontally using inline-block, but they kept appearing vertically. To be clear, there are a number of ways to get to the presentation that this person was attempting, but I didn’t consider that part of the exercise.
The problem stems with the way inline-block will pad elements whenever the HTML markup isn’t compressed.
For example:
This
Will render differently than this
Here’s a working example of what the developer was working with
See the Pen Inline Block with padding by Pete (@peterbenoit) on CodePen.