Display: Inline vs. Inline-Block
Positioning elements correctly on a page is one of the biggest challenges in CSS. There are so many selectors, properties and values, it can all be quite overwhelming sometimes.
Let's take a look at one common question - what's the difference between display: inline and display: inline-block? Both specify how elements should fit in relation to the surrounding content - but which one should you use, and when?
In order to answer this question, we should take a step back and make sure we understand the difference between inline and block-level elements. Here's a quick refresher:
An inline element does not start on a new line and only takes up as much width as necessary.
An example of this would be when we use the <strong> tag. This fits within the flow of the text and doesn't cause the text within the tag to sit by itself on a new line.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
One example of a block-level element is the <p> tag. This causes the text within the tags to begin on a new line. Whatever follows the paragraph will also begin on its own new line.
Generally speaking, block-level elements may contain inline elements and other block-level elements, however inline elements can't contain block-level elements.
Now that we've covered the difference between inline and block, lets look at the difference between inline and inline-block. The names give us our first clue.
Display: inline is essentially what we covered earlier in the article. Content will stay on the same line if possible, only wrapping onto a new line if there's not enough space. We can specify margins and padding for these elements, however only the left and right values will be respected - margins and padding on the top and bottom will overlap with other content. Here's an example:
Display: inline-block, as the name suggests, finds a happy medium between the inline and block-level characteristics. In some way it gives us the best of both worlds. Inline-block allows us to specify the height and width of elements, which we can't do with inline. Margins and padding on the top and bottom of elements are also respected, unlike what we see with the inline value. The key difference between block and inline-block is that the latter doesn't cause the element to appear on a new line. Inline-block elements can sit beside one another as friends and equals. Here's an example of inline-block in action:
