Display
The Invisible Stage Direction
In the magical realm of CSS, display decides how your elements appear—or if they even make it onto the stage at all! A block element enters with grand flair, commanding the entire space like a king on his throne. No one dares line up beside it.
Inline elements, on the other hand, are the graceful dancers in the background, taking only as much space as they need and quietly standing side by side.
Then there’s the diplomatic acrobat, inline-block, which has the size of a block but politely aligns with its peers. And if you truly wish to cast a spell, use display: none to make an element vanish entirely, as if it were never there.
Visibility with Rules
Block, Inline, Inline-Block or simply gone – you decide how elements behave!
Display
The Stage Direction
With display, you tell your element how it should behave. Will it spread out like a majestic block, commanding attention? Or will it quietly align in a row like a slim inline element? Perhaps it might even vanish completely? The display property determines how an element fits into the webpage’s layout matrix, shaping its role on the stage.
Block
The Dominator
A block element is like a ruler on a throne: it claims the entire width, whether it truly needs the space or not. It always starts on a new line and tolerates no other elements in its row. For most HTML elements, this is the default behavior.
.element {
display: block;
}The .element is displayed as a block element and occupies the entire available width.
Inline
The Graceful Dancer
Inline elements are the counterparts to block rulers. They glide effortlessly side by side, taking up only as much space as they need. They don’t force line breaks, allowing text, images, and links to coexist harmoniously in a single row.
.element {
display: inline;
}The .element is displayed as an inline element and only takes up as much space as its content requires.
Inline-block
The Balancing Act Between Worlds
inline-block is the graceful performer walking the fine line between inline and block. It combines the best of both worlds: like an inline element, it stands politely in a row alongside its siblings, yet like a block element, it proudly defines its own width and height. It’s the perfect middle ground for elements that need to align side by side while retaining block-like control over their size and structure.
.element {
display: inline-block;
}The .element combines properties of both block and inline elements: it aligns alongside other elements but can be styled like a block, with fixed widths and heights.
None
The Invisible One
Sometimes you need an element to vanish—no drama, no trace. With display: none, the element is removed from the layout as if it never existed. Perfect for making something disappear without disrupting the page flow—and you can easily summon it back from the void whenever needed.
.element {
display: none;
}The .element is completely removed from the layout and remains invisible, taking up no space in the document.
In this lesson, you have learned…
- How to use
display: blockto show elements on a new line, letting them take up the full available width. - Why
display: inlineis ideal for placing elements side by side without starting a new line. - How
display: inline-blockcombines both worlds—acting like inline elements while allowing control over size and spacing. - Why
display: noneis useful for hiding elements completely without them taking up any layout space.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Secrets of Shadows
Umbra, the self-proclaimed Queen of Stealth, has struck again. Her shadow illusions are so cunning that even the brightest minds end up lost in dead ends. But fear not! With the power of display properties, you’re well-equipped to outwit her tricks. Learn how to make elements vanish gracefully, spotlight them dramatically, or have them shift forms like a chameleon. Armed with this knowledge, you’ll navigate her dark deceptions with ease—and she’ll wish she’d never played games with you!
Your Task: Manipulate Your Elements
- Create a block element: Set an element to
display: block;and observe how it stretches to fill the entire available width. Note how it places itself below other elements. - Understand inline elements: Change an element to
display: inline;and watch as it aligns next to other inline elements. Test how its width and height behave under these conditions. - Test inline-block: Use
display: inline-block;to style an element that behaves like an inline element but allows for fixed width and height, like a block element. - Hide elements (display: none): Set an element to
display: none;to make it completely disappear. Observe how the layout of other elements adjusts when an element is hidden this way. - Combine display properties: Experiment by applying different
displayproperties to various elements in the HTML structure. Test how their appearance and behavior shift depending on the display property applied.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
/* Display-Types */
.block {
display: block;
background: linear-gradient(135deg, #4caf50, #2e7d32);
border: 2px solid #81c784;
}
.inline {
display: inline;
background: linear-gradient(135deg, #e57373, #c62828);
border: 2px solid #ef9a9a;
}
.inline-block {
display: inline-block;
background: linear-gradient(135deg, #1e88e5, #1565c0);
border: 2px solid #90caf9;
width: 150px;
}
.none {
display: none;
}
/* Inline vs. Block */
.inline-vs-block {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding: 15px;
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
border: 2px dashed #fff;
}
.inline-vs-block span,
.inline-vs-block div {
padding: 10px;
font-size: 1.2rem;
}
.inline-vs-block span {
display: inline;
background: #ff5722;
border: 2px solid #ff8a65;
}
.inline-vs-block div {
display: block;
background: #8e44ad;
border: 2px solid #b39ddb;
}