Display Property Block, Inline, and Inline Block

HTML elements behave differently depending on whether they are block, inline, or inline-block. These display types affect layout, spacing, and what CSS properties you can use.

Block Elements

• Start on a new line;
• Take up the full width of their container;
• Support width, height, margin, padding, and border.

Common examples: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Inline Elements

• Stay on the same line;
• Take only the space needed for their content;
• Cannot have width or height applied (but border works).

Common examples: <a>, <span>, <img>, <input>.

Inline-Block Elements

• Stay inline, like text;
• Support width, height, margin, padding, and border, like block elements.

Examples: <button>, <select>, <textarea>.

They are useful when you need elements to sit side by side, but still allow full styling control.

Key Differences