Web Development - CSS Display
CSS Display
The display property determines how an element is shown on a web page.
It defines whether elements appear on a new line, share a line, or are hidden entirely.
Default Display Values
Every HTML element has a default display value depending on its type:
- Block-level elements start on a new line and take up the full width.
Examples:
<div>,<p>,<h1>,<section> - Inline elements stay within the flow of text.
Examples:
<span>,<a>,<strong>,<em>
Example
Default display behavior:
<p>This is a paragraph (block element).</p>
<span>This is a span (inline element).</span>
<span>It continues on the same line.</span>
Try it Yourself »
display: block
Block elements start on a new line and stretch to fill the container's width.
Example
Block elements:
div {
display: block;
background: lightblue;
padding: 10px;
margin: 10px 0;
}
Try it Yourself »
display: inline
Inline elements do not start on a new line and only take as much width as needed. Margins and padding only affect the left and right sides.
Example
Inline elements:
span {
display: inline;
background: lightgreen;
padding: 5px;
}
Try it Yourself »
display: inline-block
Inline-block elements act like inline elements but respect all box model properties (width, height, margin, padding).
Example
Inline-block boxes:
.box {
display: inline-block;
width: 150px;
height: 100px;
margin: 5px;
background-color: coral;
}
Try it Yourself »
This allows multiple boxes to appear next to each other, like buttons or cards.
display: none
The display: none property completely removes an element from the layout (it takes no space).
Note: Elements with display: none are not visible and do not take up space - unlike visibility: hidden.
visibility: hidden
The visibility property hides an element but still keeps its space reserved.
Changing Display Type
You can change an element's display behavior to fit your design.
Example
Make inline elements behave like blocks:
a {
display: block;
padding: 8px;
background: lightblue;
margin: 5px 0;
}
Try it Yourself »
This is often used to make navigation links stack vertically.
display: flex and display: grid
Modern layouts use flex and grid to create advanced, responsive designs.
You will learn about these in later chapters.
Example
Basic flex container:
.container {
display: flex;
gap: 10px;
}
Summary
displaydefines how an element behaves in the layout.- Block elements start on a new line, inline elements do not.
inline-blocksupports box model while staying inline.display: noneremoves the element;visibility: hiddenhides it but keeps its space.- Modern layouts use
display: flexanddisplay: grid.
Next, you'll learn about CSS Position - how to move and position elements precisely on your web page.
