Learn CSS display property in 4 minutes! 🧱

#CSS #tutorial #explained
CSS display block inline inline-block tutorial example explained

[@BroCodez]

Bro Code

div
span
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam asperiores doloremque repellendus quibusdam, quasi reprehenderit nesciunt illum repudiandae illo ad perspiciatis voluptas velit dicta similique veritatis quos non explicabo vel.
/* style.css */
div{
background-color: hsl(0, 100%, 75%);
width: 100px;
height: 100px;
display: block;
}
span{
background-color: hsl(204, 100%, 75%);
width: 100px;
height: 100px;
display: inline;
}

[@augustinejoseph4302]

thanks bro, I was wondering what the heck is inline-block . Today I got it clear... thanks again...

[@marianuntaru7940]

After watching some videos and still struggling finally you brought the light! Easy and straight to the point ! Thank you!

[@JayantBB78]

No nonsense, right to the point video. 👍🏻

[@joshuamensah9309]

Absolutely legendary video 💯

[@techtipstricks2776]

Wow. Great explanation.. u got subscriber

[@rishabhranjan5162]

Amazing bro

[@user-nv8rm5yx8z]

That's awesome explanation Bro Code!]

[@nateroskelley7565]

This makes sense, and I understand how block, inline, inline-block, and none work together. Looking at it like this, it seems like display refers to how an element interacts with the elements around it.
But there's 2 more display properties: Flex, and grid. I understand the choice not to include them in this video, they are large enough topics that they deserve their own video. But I don't really understand why display defines the way that the element interacts with the elements around it sometimes, and defines the way that the elements inside it interact other times. Could you explain what exactly display is supposed to be doing?

[@user-nv8rm5yx8z]

Exactly!
I am just out of my confusion!
by the way what do you do now and how far are you in learning code bro?

[@markzait2750]

Very good explanation. Thank you Bro Code!

[@Wadih-bc]

Very much appreciated! Thanks :)

[@kamoliddinshukurov7339]

Easy to understand, thank you brother

[@surfas5434]

OMG looks like we are heading to another 10 hours bro code course

[@thedevil6397]

Tysm for this 😇

[@vs-cd6qq]

Thank you

[@cartoondhamaka5897]

thank you

[@_sun-shine-youtube.]

❤❤❤

[@arunbm123]

nice

[@halcyon__r3289]

Ty

[@user-op9rh8oe2h]

Bro Code is the goat

[@MasumExtended-jt4ty]

Not Bro Code..
Its Best Code Channel..

[@capslock3250]

Thanks

[@sagnikdeb7516]

Thanks bro because I was not able to understand it until I saw this video.

[@magickomchanell4556]

thank a milion

[@Baraa_kj]

bro i was stack in inline for 1h and u help me 🙏

[@rouisaek]

[@andyl9920]

Which one is best to use?
Display: none
Visibility: hidden
-or-
Opacity: 0

[@user-mj6oj4do7d]

Really useful but you talk too fast, I can barely here you.

[@taitruong2604]

You can reduce the playback speed to .75 or .5 if you want to