Организация отступов margin и padding, Видео курс по CSS, Урок 36

[@ITDoctor]

Курс Вёрстка на HTML & CSS для начинающих: stepik.org/z/101175

[@ОлегПетров-п4у]

Самое подробное и доступное объяснение данной темы! (margin VS padding)

[@ITDoctor]

Спасибо. Рад что нравится

[@akramyuldoshev4889]

ВЫ ОЧЕН ПОМАГАЙТЕ МНЕ СВАИМИ УРОКАМИ! ВЫ ЛУДШИЙ ИЗ ЛУДЩИХ

[@ITDoctor]

спасибо

[@michailpty6302]

ну почему я раньше это видео не видел) спасибо!!!!!

[@ITDoctor]

Всегда пожалуйста

[@alenasakuta7434]

Спасибо! Совсем мало информации на просторах интернета об этом.

[@ITDoctor]

Рад что оценили

[@Viktoriya_Sergeeva]

Как я рада, что вас нашла. Очень нравятся ваши объяснения, все сразу становится понятно. Спасибо за ваш труд!

[@ITDoctor]

спасибо что оцениил!

[@PerecNeDorogo]

Видео лайк, и комментарий для продвижения. Удачи!

[@ITDoctor]

Спасибо!

[@puzzaro166]

IT DOCTOR ✊👍

[@ITDoctor]

Спасибо

[@krepkiychay]

Маргины накладываются. При box-sizing: border-box padding входит в height. Это все что нужно знать про это

[@volodya3838]

введение второго класса или обернуть в див, дабы убрать у последнего элемента отступ это классно, но можно использовать Gap.

[@ITDoctor]

можно. старая школа из головы так легко не выветривается и сам все время забываю что уже даже во flexbox есть gap. по началу это работало только в grid

[@АкимеУсеинова-с3е]

Лайк 👍

[@SireneviyRay]

А почему при .mr.5 + .mr5 это сработало только для нижнего и среднего элемента и не сработало для первого? Первый, ведь, также, имеет класс mr5...

[@Tornado-ln7fq]

То есть что мы имеем,padding это свойство чтоб двигать текст.А margin ,это двигает блок относительно своего родителя,а грубо говоря, в блоке в котором находится,я правильно понимаю?

[@ITDoctor]

Да.

[@Barbara-s8Barbara_3g]

In a twist of fate, a system error directed the transaction to an invalid email address.

[@SireneviyRay]

Возник вопрос: почему .mr5 + .mr5 влияет на 2 и 3 элемент и не влияет на первый, если у него такой же класс?

[@ITDoctor]

есть такая вещь называется - схлопывание отступов. наверняка я рассказывал если не в этом видео то в каком то другом уроке в плейлисте по css но можете почитать про это developer.mozilla.org/ru/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing

[@Fen1ks_of_darkness]

Возможно не много поздно напишу😅 но: Можно ли заменить например в списке, margin заменить на: display: flex, column-gap: 15px? Ведь эффект будет тот же!? (Я начинающий, поэтому и спрашиваю :))

[@ITDoctor]

никогда не поздно. можно и так. единственный минус что там так же будет у последнего элемента gap насколько я помню. Но у Grid в отличии от Flex все хорошо работает с gap и он добавляется только между элементами но не снаружи

[@kirill-petrov]

Не услышал самого главного в этом принципе "слева направо, сверху вниз". Как получить отступы слева и сверху - от границы родителя до ребёнка? Внутренними отступами родителя? То есть мы можем пользоваться только свойствами padding: top/left и margin: right/bottom?

[@ITDoctor]

можем всеми пользоваться как я и говорил. Но рекомендуется для чистоты кода так: padding: top/left и margin: right/bottom. Но можно делать исключения, там по ситуации разработчик уже смотрит с опытом будет понятно где можно отклоняться от этих рекомендаций

[@kirill-petrov]

@@ITDoctor Получается внутри блока создаём пространство между границей и элементами/контентом падингами, а внешние отступы только bottom/right и только для бэм-элемнтов.

[@kaliningradskyiuser3087]

Там же все просто, даже правило написано, что оно гласит. Margin для отступов контенеров, а padding, для отступов в нутри контенеров для контента, вот и все. А если совсем строго, это так. Контенеры, мы двигаем только margin, а текст padding. Вот такое простое правило, но его не кто не придерживается, от чего в верстке творится полный беспорядок.

[@niqwer477]

а почему текст можно двигать только padding?

[@kaliningradskyiuser3087]

@@niqwer477 О это ещё пошло с вёрстки бумажной, но webe голимый беспредел, кто во что горазд. Кто как хочет так и делает а к общему прити не могут, или не хотят.

[@igorjazz4544]

?

[@pubertat14]

Салам 9б классу🤙🇷🇺