Every HTML element has a default display behavior some act like blocks, others like inline text. But with CSS, you can change how any element behaves visually using the display property.
In this post, you will learn:
- What block-level and inline-level elements are
- Differences between block and inline elements
- Why the
displayproperty is important in CSS - How to use common
displayvalues - How to change the default behavior of HTML elements using CSS
- Simple real-life examples
Let’s start!
Block-Level Elements
Behavior:
- Take up full width of the container
- Always start on a new line
- Can contain other block or inline elements
Common Block-Level Elements:
<div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>, <section>, <article>, etc.
Example:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Block-Level Elements</title>
<style>
div {
background-color: lightblue;
}
p {
background-color: lightgreen;
}
</style>
</head>
<body>
<div>This is a block element</div>
<p>This is another block</p>
<!-- Background color in style will help you visually understand the space occupied by an element. -->
</body>
</html>Output:
This is a block element
This is another block
Inline-Level Elements
Behavior:
- Take up only as much width as needed
- Sit within a line, side by side
- Cannot contain block-level elements
Common Inline-Level Elements:
<span>, <strong>, <em>, <a>, <img>, <code>, <label>, <input>, etc.
Example:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inline-Level Elements</title>
<style>
span {
background-color: lightblue;
}
a {
background-color: lightgreen;
}
</style>
</head>
<body>
<span>This is inline</span>
<a href="#">So is this link</a>
<!-- Background color in style will help you visually understand the space occupied by an element. -->
</body>
</html>Output:
This is inline So is this link
Quick Analogy
Imagine text in a Word document:
- If Block elements are paragraphs (each starts on a new line)
- Then Inline elements are words inside a sentence
Why Does This Matter in CSS?
Because when we use CSS, we can change an element’s behavior using the display property.
For example: A <div> is a block by default, but we can make it behave like inline:
div {
display: inline;
}So understanding block vs inline helps you predict and control layout.
Now that you have understood the difference between block-level and inline-level elements,
Let’s learn how to use display property in CSS and control or change the default behavior of any HTML elements.
Basic Syntax of display
selector {
display: value;
}Explanation:
selector– The HTML element you want to style (e.g.,div,.box,#menu)value– The type of display behavior you want (e.g.,block,inline,flex, etc.)
Common Values of display
display: block
Behavior:
- Starts on a new line
- Takes up the full width available
- Can have width, height, padding, margin
Example:
<div style="display: block; background: lightblue; margin-bottom: 10px;">I am a block element 1</div>
<div style="display: block; background: lightgreen; margin-bottom:: 10px;">I am a block element 2</div>Output:
Note: Even without setting display: block, a <div> or any block-level-element behaves this way by default.
display: inline
Behavior:
- Stays within the line
- Takes up only the space needed
- Cannot have width or height
Example:
<span style="display: inline; background: lightblue;">Inline 1</span>
<span style="display: inline; background: lightgreen;">Inline 2</span>Output:
Inline 1 Inline 2
Note: Inline elements can’t have width, height, margin-top, or padding-top.
display: inline-block
Behavior:
- Behaves like inline (sits on same line)
- But can have width, height, margin, padding
Example:
<div style="display: inline-block; width: 100px; height: 50px; background: lightblue;">
Box 1
</div>
<div style="display: inline-block; width: 100px; height: 50px; background: lightgreen;">
Box 2
</div>Output:
Note: Useful for buttons, badges, menu links, and labels.
display: none
Behavior:
- Completely hides the element
- Element is not visible and takes up no space
Example:
<p style="display: none;">You won’t see me</p>Unlike visibility: hidden, which hides the element but keeps its space, display: none removes it entirely from the layout.
Note: Useful for hiding things until needed (like menus, modals, etc.)
display: flex
Behavior:
- Turns a container into a flex layout
- Child elements are arranged in a row or column
- Allows easy alignment, spacing, and resizing
Example:
<div style="display: flex; background: yellow;">
<div style="background: lightblue;">Item 1</div>
<div style="background: lightgreen;">Item 2</div>
</div>Output:
display: flex turns a container into a flex container where child items can be aligned efficiently – horizontally or vertically.
Note: Great for navigation bars, cards, or any layout in a row or column.
display: grid
Behavior:
- Creates a grid-based layout
- Elements can go into rows and columns
Example:
<div style="display: grid; grid-template-columns: 1fr 1fr;">
<div style="background: lightblue;">Box A</div>
<div style="background: lightgreen;">Box B</div>
</div>Output:
Note: Ideal for page layouts, galleries, dashboards.
Bonus Tip: Changing Display with Media Queries
You can make things responsive!
@media (max-width: 600px) {
.menu {
display: block;
}
}Summary Table
| Value | Starts on New Line | Can Set Size? | Common Use |
|---|---|---|---|
block | Yes | Yes | Sections, containers |
inline | No | No | Text, links |
inline-block | No | Yes | Buttons, boxes in line |
none | N/A | N/A | Hide elements |
flex | N/A | Yes | Row/column layouts |
grid | N/A | Yes | Multi-row/column layouts |
Practice Task
Try this:
- Create three
<div>s withdisplay: block,inline, andinline-block - Add background colors and see how they behave differently
- Hide one using
display: none