Display Types in CSS
In CSS, the display property controls how elements appear and behave on a web page. Understanding display types is essential for creating proper layouts and designing responsive websites.
Block Display
A block element takes up the full width available and always starts on a new line. This means each block element appears below the previous one.
Common block elements include div, p, h1 to h6, and section.
Key features of block elements
They take full width of the parent container
They always start on a new line
You can set width height margin and padding
Example
div {
display: block;
}
Inline Display
Inline elements only take up as much width as their content requires. They do not start on a new line and appear side by side.
Common inline elements include span, a, strong, and em.
Key features of inline elements
They do not start on a new line
Width and height cannot be applied properly
Margin and padding work only horizontally
Example
span {
display: inline;
}
Inline Block Display
Inline block is a combination of both block and inline. Elements stay in line but can have width height margin and padding like block elements.
Key features of inline block elements
They do not start on a new line
You can set width and height
Margin and padding work on all sides
Example
div {
display: inline-block;
width: 150px;
height: 100px;
}
When to Use Each Display Type
Use block when you want elements to stack vertically and take full width
Use inline when you want elements to flow within text without breaking the line
Use inline block when you need elements side by side but still want to control their size and spacing
Conclusion
Understanding block inline and inline block display types helps you control layout and structure in CSS. These concepts are the foundation of modern web design and are important for beginners to master before moving to advanced layout techniques like Flexbox and Grid.