“There are 8 ways to do the same thing!”
“Should I use inline or block?”
We all have those questions popping in our heads when we try to build something new with HTML / CSS, how the elements are going to be displayed? on top of each other? side by side?
It can be frustrating when you’re just starting to learn HTML / CSS.
So, let’s take a look at what display property is?
- display property tells the browser how elements are going to be rendered by the browser.
There are plenty of display values, we’re going to focus on just 4 of them. Those are:
- display: block;
- display: inline;
- display: inline-block;
- display: none;
display: block;
- Block-level elements start at a new line and the elements come after it has to start at a new line.
- It takes up the largest available space.
- We can control width and height of the element.
- Elements are affected by margin and padding.
- Block-level elements stacks on top of each other ( like hamburger ingredients ).
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8">
<title>Hamburger</title>
</head>
<body>
<div class=”bun”>Bun</div>
<div class=”cucumber”>Cucumber</div>
<div class=”onion”>Onion</div>
<div class=”bacon”>Bacon</div>
<div class=”cheese”>Cheese</div>
<div class=”meat”>Meat</div>
<div class=”tomato”>Tomato</div>
<div class=”lettuce”>Lettuce</div>
<div class=”bun”>Bun</div>
</body>
</html>- As we can see, block-level elements create a new line for preceding and subsequent elements ( div is a block-level element )
display: inline;
- Inline elements take minimum available content space.
- We can’t control the width and height of the element.
- Only horizontal dimensions are affected by margin and padding properties, element’s width and height will remain unaffected.
display: inline-block;
- Combination of block and inline elements.
- Main difference from inline elements is we can control the width and height properties.
- Elements are affected by margin and padding properties (both vertically and horizontally).
display: none;
- It simply hides the element.
- An element that has display: none property is not going show up on the screen and other elements will act like it doesn’t exist.
Let’s take a look at how they interact with each other
We learned what inline, inline-block, block-level elements are. It’s time to see how they work together.
Imagine you purchased two paintings, a TV, and a TV unit to decorate your favorite corner of the house.
First, you put the TV between the paintings vertically and the TV unit at the bottom. (display: block; on each element)
Hmmm, that looks fine but I think we can do better. Let’s put paintings and the TV side by side (display: inline;)
That didn’t work either. (Remember, we can’t control width and height properties of inline elements) I think we can make it work by giving each of them the space they need. (display: inline-block;)
Yay, it worked. As a finishing touch, let’s center that TV unit at the bottom (display inline-block at TV unit element ).
So, you might ask how that TV unit is centered automatically. Because we gave text-align: center; property to their parent element.
You can take a further look at this codepen.
To view source code click Change View at the top right corner, and select Editor View.
This article was originally published on catagec.com. If you find this content helpful you can read more content like this over there.
Which concepts make CSS harder to learn? Tweet me @CAtagec and share your struggle.
