CSS Display property
Tags: css, layout
Published: 2019-06-15 08:48:38


In [this post](https://frontend.cloudaccess.host/css-property-position/), 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
{% codepen https://codepen.io/phuchieuct93abc/pen/NZxaae default-tab=css,result%}


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>`
{% codepen https://codepen.io/phuchieuct93abc/pen/OeMxar default-tab=css,result%}


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.
{% codepen https://codepen.io/phuchieuct93abc/pen/GboQMx default-tab=css,result%}



#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/