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

Подписаться 69 тыс.

Просмотров 17 тыс.

50% 1

В этом уроке я расскажу где лучше использовать margin, а где padding. В каких ситуациях и как лучше использовать эти два свойства margin и padding для создания отступов. Организация отступов margin и padding очень важна и на первых этапах может возникать вопрос, что же лучше использовать margin или padding в той или иной ситуации. В этом уроке я расскажу о нескольких простых правилах, которые помогут вам в организации отступов с помощью margin и padding.
Эксклюзив на Boosty - boosty.to/itdoctor
Telegram канал - t.me/itdoctor_official
Курсы на Stepik - stepik.org/users/387773773/teach
Донаты:
1. ЮMoney - sobe.ru/na/itdoctor
2. VISA - 4274 3200 3233 1582
ВКонтакте - itdoctorstudio
Яндекс Дзен - zen.yandex.ru/id/5f994406f3d1...
Rutube - rutube.ru/channel/23500045/
#css #css3 #margin #padding #itdoctor

Опубликовано:

22 авг 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 34

@ITDoctor 2 года назад

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

@user-kn3ut1sh2o 2 года назад

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

@ITDoctor 2 года назад

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

@michailpty6302 Год назад

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

@ITDoctor Год назад

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

@akramyuldoshev4889 2 года назад

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

@ITDoctor 2 года назад

спасибо

@alenasakuta7434 2 года назад

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

@ITDoctor 2 года назад

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

@puzzaro166 2 года назад

IT DOCTOR ✊👍

@ITDoctor 2 года назад

Спасибо

@PerecNeDorogo Год назад

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

@ITDoctor Год назад

Спасибо!

@user-xw8qg3iy5h Год назад

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

@ITDoctor Год назад

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

@user-kb4kd2vd7v 2 года назад

Лайк 👍

@SireneviyRay 24 дня назад

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

@volodya3838 11 месяцев назад

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

@ITDoctor 10 месяцев назад

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

@Fen1ks_of_darkness Год назад

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

@ITDoctor Год назад

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

@Tornado-ln7fq 2 года назад

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

@ITDoctor 2 года назад

Да.

@kirill-petrov Год назад

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

@ITDoctor Год назад

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

@kirill-petrov Год назад

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

@SireneviyRay 24 дня назад

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

@ITDoctor 23 дня назад

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

@kaliningradskyiuser3087 Год назад

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

@niqwer477 Год назад

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

@kaliningradskyiuser3087 Год назад

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