The Hidden CSS Mistake: Margin Collapse

Поділитися
Вставка
  • Опубліковано 6 січ 2025

КОМЕНТАРІ •

  • @mahtabvariyani
    @mahtabvariyani 2 роки тому +7

    This GUY and His Channel Should be Subscribed

  • @hamletgordillo2560
    @hamletgordillo2560 6 днів тому

    Out of all the videos on Margin Collapse that I've seen as I'm learning this is the best one, short and exlains it very well visually.

  • @imli700
    @imli700 2 роки тому +5

    Other videos just weren't doing it for me. Yours did. Thanks a lot!

  • @FaezeChenani
    @FaezeChenani 11 днів тому

    tanks for this detailed and good explanation...its illustrated explanation really helps me

  • @Aziz-kw6ct
    @Aziz-kw6ct Рік тому +1

    It was amazing, I struggled with understanding it and you made it easy. Thanks

  • @Slimboyfat1979
    @Slimboyfat1979 2 роки тому +1

    This video is amazing for multiple reasons.

  • @Johanna77777-z
    @Johanna77777-z Рік тому +1

    Thanks for this video! I thought there was some css in the project I was in that made this phenomenon. Turns out I just didn't know about this!

    • @Skillthrive
      @Skillthrive  Рік тому

      You're very welcome! Margin collapse is a weird one. 😅

  • @MatachiMmeri
    @MatachiMmeri Рік тому +1

    That was fun to watch 😂 Thank you

  • @mahtabvariyani
    @mahtabvariyani 2 роки тому +1

    I loved the creativity and all Infos in this Video .....Perfect....you are not only Smart but Creative also

    • @Skillthrive
      @Skillthrive  2 роки тому +1

      Thank you so much 😀

    • @ReazAhmed-q2z
      @ReazAhmed-q2z Рік тому

      I don't understand what he says because he talking in English and i am from bangal

  • @JohnWickXD
    @JohnWickXD 2 роки тому +1

    Awesome tutorial...and lec delivery was really cool⚡

    • @Skillthrive
      @Skillthrive  2 роки тому

      Thank you! Glad you liked it. 😊

  • @tko401
    @tko401 4 місяці тому

    amazing video! thank you!

  • @Manas-co8wl
    @Manas-co8wl Рік тому

    Ugh.. this explains the problems I've been experiencing. Thank you

  • @js_programmer8423
    @js_programmer8423 2 роки тому +3

    Just apply -> display: flow-root; on the parent container. This should fix it.

    • @Skillthrive
      @Skillthrive  2 роки тому

      Nice! I've actually never used this before. Probably bc I would use flex/grid.

  • @rejointrident
    @rejointrident 5 місяців тому +1

    I don't understand why a top margin transfers to the parent element when applied to a child container

    • @Skillthrive
      @Skillthrive  4 місяці тому

      It basically just comes down to "the largest margin wins." If you want "spacing" for the child and parent to behave separately, then you might want to use padding instead.

  • @iganic7574
    @iganic7574 9 місяців тому +1

    it also won't happen when you have border property on parent.

  • @SJ-hz7iu
    @SJ-hz7iu Рік тому

    On rule 3: How can two block-level elements be on the same line, next to each other, to have margin-right and margin-left situation? Am I missing something?

    • @Skillthrive
      @Skillthrive  Рік тому

      I’m not sure I understand your question exactly, but it doesn’t matter how many elements there are.

    • @SJ-hz7iu
      @SJ-hz7iu Рік тому

      @@Skillthrive Sorry. I edited typos in my question. Thank you.

  • @abdalmalk_kasem
    @abdalmalk_kasem Рік тому

    thx

  • @thegoldgamer6339
    @thegoldgamer6339 Рік тому

    Im an 11 year old and i learned html and css in 1 month and also half of javascript

  • @avgvstvs96
    @avgvstvs96 Рік тому

    my parents r not impressed with my newfound margin knowledge :(

  • @SponkADonk
    @SponkADonk Рік тому

    Kinda sound like the Joe Rogan of web dev lol