Margin collapsing (схлопывание)

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024
  • Привет!📢
    ▶ Telegram: t.me/Dmitry_Ko...
    ▶ GitHub: github.com/Dmi...
    ▶ Linkedin: / kolotilshikov
    Margin collapsing (схлопывание)
    Ваша обратная связь обязательна =)
    Курс Frontender[1.0] разделен на 3 модуля:
    1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков);
    2) JavaScript, решение задач, написание нескольких приложений;
    3) React, Typescript, Redux написание полноценного приложения;
    НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
    Желаю приятного обучения! 🔥
    ▶ Графический дизайн и анимация: t.me/getlogo
    📢 ПЛЕЙЛИСТ FRONTENDER[1.0] - 1 Модуль: • 2024 КУРС | Frontender...
    Также тебе могут быть полезны эти уроки:
    📢 HTML для начинающих за 33 минуты: • HTML для начинающих за...
    📢 CSS для начинающих + практика за 24 минуты: • CSS для начинающих + п...
    📢 FLEXBOX. Всё о flexbox в одном уроке: • FLEXBOX. Всё о flexbox...
    📢 FLEXBOX. Всё о flexbox | Практика: • FLEXBOX. Всё о flexbox...
    FRONTENDER[1.0] полный, структурированный и бесплатный курс по фронтенд разработке на RUclips.
    📢 Автор курса: Дмитрий Колотильщиков
    #html #frontend #frontender

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

  • @daniil2704
    @daniil2704 8 месяцев назад +10

    Я уже привык к gap, всегда если нужны отступы, использую его с flex/grid. Марджин использую редко, только для конкретного элемента, а не для нескольких, ибо когда несколько, то родителю gap) ну и как итог такое встречаю редко. Но в свое время помню не понимал почему так происходит и как это вообще работает)

  • @РусланГрищук-в6я
    @РусланГрищук-в6я 3 месяца назад

    100px поставить на top или bottom) Всё гениальное просто)

  • @КоляСолдат
    @КоляСолдат 9 месяцев назад +10

    При flexgrid можно и gap с паддингом родителю. Варианты ограничиваются только фантазией. Хороший ролик, красиво сделано и тема агоньпушка 👍

    • @dmitry_kolotilshikov
      @dmitry_kolotilshikov  9 месяцев назад +2

      💪

    • @mexvision-3556
      @mexvision-3556 9 месяцев назад +2

      Всё верно, пора уже объяснить людям что flexbox - это удобно. А то всё еще встречаю новую верстку где люди играются минусовыми margin у родителя чтобы строить сетки=) И почему-то активно игнорируют calc

    • @КоляСолдат
      @КоляСолдат 9 месяцев назад

      @@mexvision-3556 верстаю еще со времен таблиц и флоата. Как только флексы окрепли поддержкой, сразу накинулся на них потом и на гриды так тем более, это же спасительные группы свойств. Нету в сообществе рупора единогласности...

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

      ​@@mexvision-3556мейби новички, ну или просто не хотят разбираться и париться с calc, если бы они знали как это удобно и предотвращает казусы в мобилке...

  • @nikr4740
    @nikr4740 9 месяцев назад +8

    Деды делали одно направленный мерджин, например, все элементы кроме первого толкаются от верха на 100px

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

      Спасибо деду за победу 🫡

    • @Айвар-щ7и
      @Айвар-щ7и 9 месяцев назад

      А почему сейчас так делать нельзя?

    • @nikr4740
      @nikr4740 9 месяцев назад +3

      Можно, но гораздо удобнее управлять на уровне контейнера посредством gap с поддерживающими режимами отображения

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

    Спасибо

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

    Работайте с margin-bottom и margin-right с псевдоклассами not(last-child) и не будете горя знать)

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

    А ещё варианты????

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

      Кидай в комменты, если знаешь)

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

      @@dmitry_kolotilshikov 🤔

  • @ГлебЧ-б8п
    @ГлебЧ-б8п 9 месяцев назад

    А ещё лучше не использовать margin если элемент ничего не толкает есть же padding 😂

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

    Как я ненавижу верстку, удачи вам на фронте!)