What is the difference between inline-block and block?

• block elements take full width and start on a new line.
• inline-block behaves like inline (stays in the same line) but allows setting width,

height, margin, and padding.

Example:

.block {

display: block;

width: 100px;

.inline-block {

display: inline-block;

width: 100px;

Key Takeaway:

inline-block combines the flow of inline with the flexibility of block.

Follow me on LinkedIn: