Learn CSS display property in 4 minutes! 🧱

Поделиться
HTML-код
  • Опубликовано: 15 сен 2024
  • #CSS #tutorial #explained
    CSS display block inline inline-block tutorial example explained

Комментарии • 40

  • @BroCodez
    @BroCodez  Год назад +24

    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;
    }

  • @safayatanimations3083
    @safayatanimations3083 24 дня назад +6

    Clearcut, simple, Easy, no music, Straight to the point Video, perfect, welldone.

  • @augustinejoseph4302
    @augustinejoseph4302 6 месяцев назад +13

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

  • @marianuntaru7940
    @marianuntaru7940 3 месяца назад +2

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

  • @JayantBB78
    @JayantBB78 6 месяцев назад +5

    No nonsense, right to the point video. 👍🏻

  • @nateroskelley7565
    @nateroskelley7565 11 месяцев назад +6

    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?

    • @MustakAhmmed-l4f
      @MustakAhmmed-l4f 9 месяцев назад

      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?

  • @joshuamensah9309
    @joshuamensah9309 9 месяцев назад +4

    Absolutely legendary video 💯

  • @dieguin_nomas
    @dieguin_nomas Месяц назад

    Best an easy to understand explanation ever ! thanks bro

  • @antabrams
    @antabrams 29 дней назад

    Ur a lifesaver man❤️💪🏾

  • @_sun-shine-youtube.
    @_sun-shine-youtube. 4 месяца назад +1

    ❤❤❤

  • @RohitKumar-zp6ci
    @RohitKumar-zp6ci 2 месяца назад

    Very helpful for revision

  • @surfas5434
    @surfas5434 Год назад +6

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

  • @pharaoh9483
    @pharaoh9483 Месяц назад

    I was wondering why my sidebar which contained elements were not being centered properly, even though they were inside a flex container with justify content center and align items center.

  • @flaykaz
    @flaykaz Месяц назад

    amazing...

  • @kamoliddinshukurov7339
    @kamoliddinshukurov7339 6 месяцев назад

    Easy to understand, thank you brother

  • @markzait2750
    @markzait2750 7 месяцев назад

    Very good explanation. Thank you Bro Code!

  • @techtipstricks2776
    @techtipstricks2776 9 месяцев назад

    Wow. Great explanation.. u got subscriber

  • @Wadih-bc
    @Wadih-bc 5 месяцев назад

    Very much appreciated! Thanks :)

  • @rishabhranjan5162
    @rishabhranjan5162 Год назад +1

    Amazing bro

  • @vs-cd6qq
    @vs-cd6qq 9 месяцев назад +1

    Thank you

  • @sadamalihussein9582
    @sadamalihussein9582 22 дня назад

    Thanks real help me

  • @user-op9rh8oe2h
    @user-op9rh8oe2h 3 месяца назад

    Bro Code is the goat

  • @MustakAhmmed-l4f
    @MustakAhmmed-l4f 9 месяцев назад

    That's awesome explanation Bro Code!]

  • @halcyon__r3289
    @halcyon__r3289 10 месяцев назад +1

    Ty

  • @MasumExtended-jt4ty
    @MasumExtended-jt4ty 4 месяца назад

    Not Bro Code..
    Its Best Code Channel..

  • @thedevil6397
    @thedevil6397 11 месяцев назад +1

    Tysm for this 😇

  • @Baraa_kj
    @Baraa_kj 4 месяца назад +1

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

  • @arunbm123
    @arunbm123 6 месяцев назад

    nice

  • @marco7838
    @marco7838 Месяц назад

    When I create a p tag and double click on it, in the browser. It takes up a lot of space than it should. Maybe because it is a block level element that when I double click the blue space is quite big. How can I contain this and minimise the amount of space an element takes up?

  • @capslock3250
    @capslock3250 6 месяцев назад

    Thanks

  • @EYUDEM
    @EYUDEM 17 дней назад

    this is it

  • @magickomchanell4556
    @magickomchanell4556 8 месяцев назад

    thank a milion

  • @andyl9920
    @andyl9920 6 месяцев назад

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

  • @rouisaek
    @rouisaek 9 месяцев назад +1

  • @AddoPatrick-g8y
    @AddoPatrick-g8y 8 месяцев назад

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

    • @taitruong2604
      @taitruong2604 7 месяцев назад

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

  • @sagnikdeb7516
    @sagnikdeb7516 5 месяцев назад +1

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

  • @cartoondhamaka5897
    @cartoondhamaka5897 10 месяцев назад +1

    thank you