Display Inline vs Inline-block

Web Development
1

As I understood that display: inline shares a line with other elements. As for display: inline-block it takes space on page that is specified. So in this case, we always need to specify width, height when we use display: inline-block;
I am a bit confused. What is the main difference between them?

2

Unlike block elements, both inline and inline-block will allow elements to sit to their left and right. However, there are several key differences between the two.

Inline:

  • Cannot have a height/width set
  • An inline element has no line break before or after it, and it tolerates HTML elements next to it.
  • Does not respect top and bottom margins/padding

Inline-Block:

  • Can have height and width properties set
  • Respects top and bottom margins/padding
2 Likes