Block, inline and inline-block elements in HTML & CSS
Display Types in CSS
Every HTML element has a default display behavior. Understanding the difference between block, inline, and inline-block is fundamental for CSS layout.
Block Elements
Block elements take up the full width available and start on a new line.
<div>I am a block element</div>
<p>I am also a block element</p>
<h1>And so am I</h1>Characteristics:
- Takes full available width by default
- Starts on a new line
- Respects width, height, margin, and padding in all directions
- Common block elements:
<div>,<p>,<h1>-<h6>,<section>,<article>,<ul>,<li>,<form>
Inline Elements
Inline elements only take up as much width as their content and do not start on a new line.
<p>This is <span>inline</span> text with <a href="#">a link</a>.</p>Characteristics:
- Does not start on a new line
- Width and height properties are ignored
- Vertical margin and padding are ignored (horizontal works)
- Common inline elements:
<span>,<a>,<strong>,<em>,<img>,<code>
Inline-block Elements
Inline-block is a hybrid: it flows inline (like inline) but accepts block-level styling (like block).
.badge {
display: inline-block;
width: 100px;
height: 40px;
padding: 8px 16px;
margin: 4px;
background: #007bff;
color: white;
text-align: center;
}Characteristics:
- Does not start on a new line
- Respects width, height, margin, and padding in all directions
- Sits in the text flow alongside other inline/inline-block elements
Comparison Table
| Feature | block | inline | inline-block |
|---|---|---|---|
| New line | Yes | No | No |
| Width/Height | Yes | No | Yes |
| Vertical margin | Yes | No | Yes |
| Vertical padding | Yes | Visual only | Yes |
| Full width by default | Yes | No | No |
Changing Display Type
Any element's display type can be changed with CSS:
/* Make a span behave like a block */
span.block { display: block; }
/* Make a div behave inline */
div.inline { display: inline; }
/* Make a link behave as inline-block */
a.button { display: inline-block; padding: 10px 20px; }Important:
Understanding these three display types is essential for controlling layout. In modern CSS, flexbox and grid add new display contexts, but block/inline/inline-block remain the foundation.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.