What is the difference between display inline and display inline block

display: inline and display: inline-block are both display properties in CSS that define how elements are laid out on the page, but they have some key differences:

1. Box Model:

   • display: inline: Elements do not create a new block context. They are arranged horizontally within the same line. Inline elements do not respect top and bottom margins or padding in layout, and width and height cannot be set.
   • display: inline-block: It combines the characteristics of both inline and block elements. It is arranged inline but allows setting width and height as with block-level elements.

2. Layout Control:

   • display: inline: Because width and height cannot be set, layout control is limited. It is commonly used for small elements like text or links that do not require size control.
   • display: inline-block: Width and height can be set, offering better layout control. It is ideal for elements that need specific sizes while being displayed within the text flow.

3. Element Alignment:

   • display: inline: Vertical alignment is controlled by the vertical-align property, typically aligned to the baseline.
   • display: inline-block: Elements, though displayed inline, can handle vertical alignment as block-level elements. The vertical-align property can adjust alignment with other inline elements.

Example

• display: inline Example: Suppose you have a series of links that you want to display in a single line without disrupting the text flow.

  html
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>

  These links are default inline elements and will display from left to right within the same line unless the line does not have enough space.

• display: inline-block Example: If you have a set of small cards, like user avatars, and you want them to display in a single line while controlling the size of each card.

  html
  <div class="user-avatar">Alice</div>
  <div class="user-avatar">Bob</div>
  <div class="user-avatar">Charlie</div>

  css
  .user-avatar {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
  }

  Each .user-avatar element will display in a single line, but you can control their size and margins to create a uniform card layout rather than simple text links.

In summary, if you need to display elements in the same line with finer control over size and layout, display: inline-block is a good choice. If you only need simple inline elements without setting width and height, display: inline is sufficient.

All the above answers provide important information regarding the original question. However, a generalization seems to be incorrect.

It is possible to set width and height for at least one inline element (the one I can think of) - the element <img>.

Both this answer and the duplicate one here indicate that it is impossible, but this does not seem to be a valid general rule.

Example:

css
img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

html
<img src="#" />

Run the code snippet Hide results

Expand snippet

it has width and height set successfully for the img element when using display: inline.

display: inline; is a display mode used for elements within a sentence. For example, if you have a paragraph and want to highlight a word, you can do the following:

html
<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

The <em> element has display: inline; by default because this tag is always used within a sentence. The <p> element has display: block; by default because it is not a sentence but a block-level element.

Elements with display: inline; cannot have height, width, or vertical margin. Elements with display: block; can have width, height, and margin.

If you want to add a height to an element, you need to set the element to display: inline-block;. Now, you can add height to the element and all other block-style elements (the block part of inline-block), but it is placed within a sentence (the inline part of inline-block).