CSS Display property

In this post, we have talked about the most important css property: positon. Besides that, it’ll be a big mistake if we forget to mention about 1 more css property which is also very important in our frontend development, that is css display. Let’s come with me and talk about it

What is the purpose of css display

CSS display will define how your HTML element takes place in the view. You want your element takes the full width of the parent element, or adapt the width of the content inside, or even with custom size for your element, CSS display all you want to use in that scenarios.

What are the available value for css display

There are many available values come up with css display such as: block, inline, inline-block, flex, table ....In this post, we are going to mainly focus on 3 most important values: block, inline and inline-block.

What is display: block

With css display:block will make your element take the full width of the parent element doesn’t matter how wide the content inside. It’s usually used when we want to make our element stand alone, no other element sit next to the right or next to the left of it. In consequence, this css will make our element more distinguishable from others as well as more noticeable. For that reason, display:block is the default value for the following element:

<div>
<h1> – <h6>
<p>
<form>
<header>
<footer>
<section>
Example

As you can see in the above sample. Every block element is displayed under the previous sibling element, not on the left, not on the right, only on the bottom.

One interesting thing here is the div element. Even it’s defined with a custom width (not full parent width), it’s still displayed in the whole line, because the browser will add margin for block element if it comes up with the custom size css to make sure no one can sit in the same line with block element.

Keep in mind that with block elements, css margin-right has no effect. Except that, we’re free to custom the size block element by css width, height, margin-top, margin-bottom and margin-left.

What should we do if we want to multiple elements sit in the same line? These scenarios, we will use display:inline.

What is display: inline

Unlike display:block makes one element stand alone in the whole line, display:inline make us able to put multiple elements in the same line.

display:block is the default value for the following element:

<span>
<a>
<img>

However, display:inline will ignore our custom size (by css width, height and margin). Inline elements always fit the size of the content inside, no more no less. Simply, you can’t change the size of the inline element except changing the size of the content inside. Only use display:inline only when you’re sure that you want that element fit the content size and no custom size at all.

What about if we want to put multiple elements in the same line with our own custom size? display:inline-block comes to our hand

What is display: inline-block

display:inline-block is the combination of display:inline(can put multiple elements in the same line)and display:block(can change the size of element by css width, height, margin).

Firstly, we can put multiple inline-block elements in the same line. Next, we can custom the size for every single element to make it matches our need. We can define the width, the height, margin for those elements freely.

Wrap up

Alongside with CSS position, display in one of the most important CSS property help us to develop attractive web applications. The only way to master css display we need to understand how it works and how to use it properly.
Hope you learned something and see you in the next post. Don’t forget to put your comment below

You can also visit my blog to read more interesting topics: https://frontend.cloudaccess.host/css-display-property/