- The display-inline property is used to transform a block level element to an inline element. When we apply this to a <div></div>, an <li></li> or a <p></p> it’s akin to converting it to a <span></span>.
- You can create a grid of boxes that fills the browser width and wraps nicely. This has been possible for a long time using float, but now with inline-block it’s even easier. inline-block elements are like inline elements but they can have a width and height.
Difference between display: inline and display: inline-block
- Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with
- Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements
Difference of supported styles as summary:
- inline: only margin-left,
- inline-block: margin,
- padding, height, width
- display: inline; is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:
- The <em> element has a display: inline; by default, because this tag is always used in a sentence. The <p> element has a display: block; by default, because it’s neither a sentence nor in a sentence, it’s a block of sentences.
- An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin.
- If you want to add a height to the <em> element, you need to set this element to display: inline-block;. Now you can add a height to the element and every other block style (the block part of inline-block), but it is placed in a sentence (the inline part of inline-block).