In normal HTML elements may have block-level or inline-level properties. For example, a p tag is a block level element that therefore has a series of defaults, such as:
- 100% width (of their parent element)
- Default margin
- They stack
- etc
On the other hand, a span element is inline. Thus for example adding a colour will not take over the entire block, but only over the text or object inside the span. What this means is that for inline elements we can’t really add things like margins and such, since those are block elements - the span simply inherits from the container.
However, padding can be added but it may interfere with other visual aspects of the page, since the inline element does not stack. To alter the behaviour we can add the display property to an element, in any of the following:
blockinlinenoneinline-block- flex
The first two are fairly self evident. The last one applies the inline style - allowing us to specify things like padding and colour of only the specific element - but it allows the entire block in which the element is embedded to grow and stack.
none simply means that the items will not display.
A common use case for this is when there is a nav element with a list of links that have a tags in them. By default each of the li is a block element, which means each item in the list will stack, leading to a vertical navigation set up. By using display: inline-block we can make every item display inline, thus achieving a horizontal navigation bar.