Understanding the CSS Display Property - block, inline, & inline-block

► The display property is responsible for how an element appears on the page. The main display properties (which we will cover in this video) are:

- block
- inline
- inline-block

Elements with display: block occupy the horizontal space of their container, stretching the full width available to them. Their height is determined by what their content needs.They can accept height and width properties which allow us to control size.

Inline elements only occupy the space their content needs, they sit in line, or within the content flow of block elements. They do notaccept height and width properties.

Elements with display inline-block mix behaviors of the other two display types. Inline in that they don't occupy their own line and sit next to other inline and inline-block elements. But block in that the height and width properties can be used now. So we can manipulate their size.

► Timestamps:
0:00 Start
0:51 The CodePen
2:04 display: block;
2:56 display: inline;
3:45 display: inline-block;
5:51 Touching on display: flex;
7:11 Replaced elements
8:11 Summary

► Get the code:

► Links used in the video:

► Social Media:

► Code & Projects:

[manendarpverma]

More of these short, compact videos, explaining exactly like this one please. Perfectly explained

[besjanaelezi]

Such a crystal-clear explanation. Thanks a lot!

[georgeepohcuaw]

The best new web dev channel. I'm learn slow but the way you explain the concepts, I easily undertsand. Sorry for my English not my native language. I wish you get more subs.

[jovanstrickland]

I am fairly new to web dev and have been a little bit confused about inline and inline-block elements until now. 100% completely understand that how they are working now.

[pranavguly]

Amazing channel and css explanations. I have been struggling with css skills for so long but your videos make them easier to understand. Best explaination of why they behave in certain ways

[futsuchinpo]

thanks a lot. your explanation video really straight to the point, with robush examples to be more easier to understand. thanksss!
really need it as beginner

[xXsmithyXx]

Amazing series mate, really looking forward to future videos 👍

[audenbickel]

Thank you! I have been trying to improve my front end skills and I have learned a lot watching your videos. Keep up the good content!

[thirty]

Great format ...wonderful and very understandable presentation.... thank you sir

[izaye_visuals]

LOVED THIS TUTORIAL!!! This helped me so much. It was so simple and easy to understand, thank you!

[frankconijn]

Nice. But how do you make the autocompletes and autoreplacements to work?

Like w300 —> width: 300px;

[sophiawokoma]

when you are adding height or width properties are you specifying it for the element or the content itself ?

[makingtheweb]

Do you have any vids on responsive navigation that has a logo included? Turns into burger as it get smaller viewport width. Cheers mate

[marinstrup]

I paid for udemy course, then always find I come over here to watch you to help it make sense 💁

[saji]

Keep up with your work.. Your tutorial is amazing

[mahamudmunna]

how are you doing that? 275 turning into 75 px ? how that is done....hope you reply

[x]

I subscribed 999 ! Get the champagne in the :)