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

2 роки тому

В этом уроке я расскажу где лучше использовать 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

КОМЕНТАРІ: 31

@ITDoctor 2 роки тому

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

@user-kn3ut1sh2o 2 роки тому

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

@ITDoctor 2 роки тому

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

@akramyuldoshev4889 2 роки тому

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

@ITDoctor 2 роки тому

спасибо

@alenasakuta7434 Рік тому

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

@ITDoctor Рік тому

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

@michailpty6302 Рік тому

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

@ITDoctor Рік тому

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

@puzzaro166 2 роки тому

IT DOCTOR ✊👍

@ITDoctor 2 роки тому

Спасибо

@user-xw8qg3iy5h Рік тому

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

@ITDoctor Рік тому

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

@PerecNeDorogo Рік тому

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

@ITDoctor Рік тому

Спасибо!

@user-kb4kd2vd7v 2 роки тому

Лайк 👍

@volodya3838 9 місяців тому

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

@ITDoctor 9 місяців тому

можно. старая школа из головы так легко не выветривается и сам все время забываю что уже даже во 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 и только для бэм-элемнтов.

@kaliningradskyiuser3087 Рік тому

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

@niqwer477 Рік тому

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

@kaliningradskyiuser3087 Рік тому

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