Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.
HTML-код
- Опубликовано: 25 июн 2024
- CSS отступы padding и margin. Подробное объяснение за 33 минуты. Расскажу как и где использовать. Какая разница между padding и margin. Поделюсь методами применения в различных ситуациях. Одним словом, padding и margin на практике! Напомню, CSS padding - это внутренний отступ объекта. От границы до содержимого. CSS Margin -это внешний отступ от границ объекта до окружающих элементов. Применяются отступы к блочным и блочно-строчным объектам.
👉 Материалы урока качай по ссылке - fls.guru/files/tutorials/padd...
👉 Урок БЭМ - • Методология БЭМ за 17 ...
Содержание:
00:00 - Вступление
00:17 - Что такое padding и margin
00:59 - Синтаксис записи padding и margin
04:53 - Применение padding и margin к строчным объектам
07:13 - padding, margin и свойство box-sizing
11:02 - padding, margin и цвет фона
12:48 - padding, margin и фоновые изображения
13:50 - padding, margin и позиционирование
15:06 - padding, margin и overflow: hidden;
15:46 - margin 0 auto. Центровка блока
16:20 - Отрицательные значения margin
21:50 - Схлопывание margin.
24:14 - Правильное использование padding и margin
32:44 - Важное напутствие
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟 Ну как полезно?
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Ты обещал ссылку по БЭМ в описании, а её нет🙋🏻♂️
@@Cezar9222 исправился)
Что за плагин, который плавно обновляет страницу после изменения кода?
Спасибо.
сколько же мучений было в запоминании паддингов... и чтоб не путаться все говорят прописывать полностью. а тут так просто все это дело объяснил! ПО часовой стрелке с 12.00. Прям захотелось коммент написать, хотя и не люблю этого делать;)
Давно уже выучил html и css, но этот чел объясняет лучше всех
Супер! Я рад!
Когда уже все сам понял, будет казаться что любой человек как бы он не объяснял, объясняет хорошо
я согласен
@@krike2315 Учу вёрстку всего-то чуть больше недели, но на другие каналы я так и не ходил, потому что лично для меня инфа здесь подаётся грамотно и во внимание берутся довольно мелкие детали, а главное - Женя почему-то меня просто заряжает и мотивирует своими уроками))
@@ThevideOoLoadeR все не так классно через 2 месяца как хотелось бы))
Следует поставить памятник, а так же вписать в историю, как одного из лучших наставников.
Ахах) Спасибо!
ни как не мог понять эти padding и margin мучился очень , и наконец то аллилуйя благодаря Жеке что то удалось понять ! Благодарю! Вы как всегда на высоте!
Да приумножит Ваши деяния Всевышний!
З.Ы.
какой олень поставил диз? кажись конкурент
завидуй молча фуцы!
Супер! Я рад что полезно! Дизы тоже интерактив)
поставили потому-что вообще не всекали о чем речь, просто набор звуков)))
Офигеть, только вбил запрос в ютубе "когда padding а когда margin", а тут видос 30 минут назад вышел)
Ну тебе крупно повезло) попал к самому хорошему teacher'у
Круть, рад что вовремя)
Не "видос", а видео.
Большое спасибо, особенно за советы как правильно задавать отступы:
1) От предыдущего элемента к следующему (сверху вниз, слева направо)
2) Обнулить отступ у последнего элемента группы (:last-child)
3) Отступы задаются самому верхнему родителю в конструкции (доме)
4) Margin не следует задавать независимым объектам (БЭМ-блокам) - используем микс блока и элемента
Ну наконец то до меня дошло, как пользоваться парой "padding + отрицательный margin". Спасибо! Как всегда наглядно и доходчиво! Уже можно школу открывать.
Спасибо большое! Возникла идея-предложение. Есть отличное видео про БЭМ, в котором все понятно, но когда начинаешь на практике строить структуру сразу все становиться сложнее. Было бы круто сделать второе видео к БЭМ в плейлист с тренингом практическим, где сверстать макет (можно сугубо тренировочный) в котором будут флексы, списки, какие то карточки итд и прямо разжевать БЭМ, где что как обозначаешь и называешь. Сам просто пересматривая стримы с версткой ставил на паузу кадры с кодом и разбирал как ты прописываешь блоки и элементы - и в итоге так научился нормально использовать бэм, но в самом стриме редко на этом заостряется внимание. Если получиться - я думаю, будет круто для тех, кто только будет знакомиться с БЭМ) Отличный выпуск, большое спасибо!
Схожая задача и вопросы. Тем не менее: сейчас нахожусь на стадии полного завершения настоящего пятистраничного тренировочного GRID-макета по БЭМ (без JS): сразу скажу, много вопросов отпадает по ходу и факту разработки одного такого макета. Он имеет в себе много ошибок, но именно тех ошибок, которые ты уже осознаёшь и скорее всего не допустишь. Далее: пересматриваешь крутые ролики ещё раз - инфо укладывается ещё лучше. Инфодрочерство хуже практики.
Шла по урокам по порядку, зависла на препроцессоре sass, наверное устала от бесконечного синтаксиса. Решила сменить угол обзора, не прерывая обучения, логики хотелось и ответов на внутренние вопросы, типа: "Все правильно, а оно не работает", а у Жени в какой ролик не зайди сплошная польза, и ответы на самые глупые внутренние вопросы начинающих Бестолковкиных. Спасибище!!!
Пожалуйста! Рад что полезно!
В видосе нашел 2 фичи о которых не знал и нашёл то что искал где паддинг 15 и марджин -15. Очень полезный контент, дай бог автору здоровья и сил!
Ох, спасибо! Вы лучший учитель в WEB разработке! Спасибо!
Вже третій раз хочу передивитися, щоб добре засвоїти. Дуже дякую за гарно поданий матеріал.
Где тут насыпать спасибо )) Блин, Дружище, огрооомная тебе благодарность! Ты делишься не только знанием в концентрированном виде, но ещё и мировоззрением, настроем и чем-то важным, что может и незаметно глазу! Успехов и счастья ) Живи, а работай в свободное время ;)
Этот урок особенно прекрасен, а прекрасен он тем, что я его смотрел не как папуас, следящий за сборкой шатла, а как специалист, который это уже давно знает и умеет))))
На выходных разбирался с Flex’ами, возник вопрос о применении padding’ов по БЭМ и семпай Жека молниеносно ответил на мой комментарий с вопросом, за это отдельное спасибо! А сегодня youtube предложил мне посмотреть это виде… прямо магия какая-то, очень кстати! Такую полезную информацию нужно обязательно добавлять в «избранное».
Жека, ты просто огонь 🔥 🔥 🔥
«Казалось бы, что может проще…»🤦♂️. Респект и уважуха ✊
Этого урока реально не хватало. Спасибо большое, Жека!
Рад что живу в такое время , где можно зайти в интернет и найти столько годного обучающего контента, что жизни не хватит что бы выучить
это всё.
Информация - огонь. Подсказка с запоминанием по часовой стрелке - класс. Чувствую себя тупым, что сам не додумался
Спасибо за такие видео!
Делай ещё!
Благодари тех кто создал такие технологии и возможности. Но они почему то для вас злейшие враги
@@Yupitrer Кого благодарить? Создателя интернета? Создателя ютуба? Шо ты несёшь?
@@aleksandrhan6208 Именно. Почему бы и нет. Тот кто развивает технологии тот и рулит, того и поддерживают. Я радиотехник, и в 2010м задумался почему нет отечественных компонентов? Начал искать, а оказалось что заводы СССР которые это все изготовляли имеют такой вид как сейчас драмтеатр в Мариуполе. Это же пиздец?
@@Yupitrer Я согласен с тобой. Я думал ты начнёшь мне про россию рассказывать...
Интересно смотреть такие туториалы от Акежа, благодарю за информативность :)
Лучший. Безусловно, спасибо за урок!
Спасибо, очень полезно! Век живи - век учись!
Евгений спасибо большое, за очередное и как всегда полезное видео!!!
Гениально и просто! Подача материала шикарна!
Ооо, новый видос, я ждал)
Я рад!
Как же это круто) Лучший контент по обучению WEB разработке.
Спасибо!
Благодарность и Уважение автору, лучший канал!
Как всегда твой контент на высоте - наглядно и доходчиво. Будь здоров!
Очень хорошо дополняет урок из курса, больше практики.👍
Отличная подача! Всё по полочкам))) Спасибо!
Как обычно благодарю за важную информацию!)
Спасибо большое! Великолепный ты человек! Ты помогаешь менять свои судьбы в лучшую сторону. Очень жаль, что случилось 24 февраля и мои соотечественники напали на вашу страну, искренне надеюсь на то, что у тебя и у твоих близких все будет хорошо! Верю в вашу победу!
Видео ооооочень классные!! Пересмотрела уже все - спасибо огромное!!
Спасибо вам за эти видео! Выручают!
Величезне Вам «Дякую» за таку Гору детальної інформації , лайфхаків та практичних порад по уникненню «підводних каменів»
Информация на вес золота!
Супер!! Спасибо! Самый лучший канал по верстке!!!
Да хранит вас Бог! Узнал много полезного для себя!)
Максимально понятно и доступно👍 Спасибо за такие крутые роллики))
"твердый" лайк))
Замечательный урок! Столько полезного узнала. Спасибо, огромное!
Блин мужик, объясняешь божественно.
Спасибо!!! Только благодаря этому уроку стало всё понятно про отступы.
Спасибо за урок!🤘
Огонь! Некоторые фишки не знал и ломал голову, выписал на память, аригато!
Лучший за работой! Спасибо тебе!)
Пожалуйста!
Много полезных советов. Спасибо.
Лучшее видео про отступы на Ютубе
Жека, как всегда, достойный уровень. Огромное тебе спасибо!
Пожалуйста!
Бомба! Дякую! Такий позитивний канал
Леха, спасибо, очень ясно теперь все!
Спасибо! Интуитивно так и делала, но теперь есть система, все благодаря вам! Мега крутой контент!!!
Прошло уже столько времени с момента выхода видео, а оно остается актуальным и по сей день. Курс просто отличный! Большое спасибо!!!
Очень доходчиво!) Я знаю кто дизлайки Вам поставил!)
Это дизайнеры точно в примерах верски текстов Вы затронули вопрос воздуха пространства и явно там есть с чем не согласиться.
Спасибо!
Лучшие видосы. Разжовано до малейших мелочей, а ещё и разные лайфхаки покажет. Жека ты крут👍.
Всегда хотел от тебя видео на эту тему!!!
Спасибо
Пожалуйста!
Спасибо! Нормально так, по делу. Понятно, на примерах, без воды.
Очень полезный урок, наконец-то все понятно теперь про отступы, подача контента, как всегда на высоте))
Спасибо, Учитель!! 💥
Жека вообще красава я вот многих смотрю но жека реально профессионал и уделяет огромное внимание деталям.
Верстай как профи будь как Жека 😎
Женя спасибо тебе за ролик сначала думал что мало чем удивишь но ты как всегда удивил)
Как всегда качественный материал. Спасибо вам за труды!👍
Спасибо!
Хороше відео. Такі важливі нюанси для новачків. Дякую.
Большое...человеческое....спасибо!!!
З кожним новим відео якість контенту(відео, звук) все краще і краще. Женя, дякую, що заморочуєшся навіть над ефектами, однозначно лайк!
Вчусь разом з вами!
Благодарю, как всегда на высоте! :) а главное - все получается!
Все очень понятно. Спасибо за подробную лекцию!
Пожалуйста!
Крутяк, отлично подбираешь цвета для уроков!
Женя, це просто круто👍👍👍👍 Дякую, зараз стало все ясніше 😀😀😀
Очень полезное видео с довольно подробно разобранным материалом. Так держать.
Спасибо!
Супер мега полезный урок, спасибо!
Мега-полезно и предельно понятно. Спасибо!
Ты мой лучший учитель!
не верил, что реально так долго буду учится, думал что брошу ИТ как и все бросал до этого. Возможно это потому что учитель хороший, спасибо, Жэка!!
Это лучший урок по отступам, из тех, что я видел. Жека, спасибо. :)
Спасибо!
Спасибо! Отличный уровень подачи материала!
Пожалуйста!
Бомбическое видео👍 огромное спасибо!))
Блин, Жэка, хотел бегло глянуть и.. "Очнулся" только когда ролик кончился. 30 мин промчалось как 3. Просто здорово. Кратко, ясно, исчерпывающе.. Дежурный лайк, все, то могу :)
Сколько времени я потратил на эти отступы, но благодаря вам, я все понял. Лучшая подача контента))
Разобралась наконец! Спасибо!!!
Пожалуйста!
Думал, что разобрался в теме, но ты меня переубедил ))) Много фишек узнал, спасибо ))
Ну как обычно, контент пушка, бомба, ракета🚀😁👍
Спасибо!
вы ответили на все вопросы) супер, спасибо!
Пожалуйста!
Ждем теперь все про position, как по мне для новичков это тоже сложно и непонятно, да и разные случаи с ним бывают
есть же вроде в разделе про css
@@user-re8qe7lg3t так и про отступы есть
Есть такое ruclips.net/video/mpykT40_VBc/видео.html
Спасибо Жека за очередной мега полезный урок! 👍
Пожалуйста!
Вспомнил старое и узнал новое, спасибо!
Моменты, когда в записи слышно голос ребёнка - бесценны ;-) У меня есть 2 сына, и хорошо понимаю, насколько это сложно добиться полной тишины)) Спасибо за крутой и подробный урок!
Спасибо! Примеры наглядные и жизненные, использую в практике.
Евгений вы Топ по css html и js! спасибо Вам большое за то что Вы делаете!)
Крутой метод срезать падинги отрицательными марджинами ))) лайк. Как всегда показал что то новое и чем то удивил !!!
Как всегда Евгений на высоте! "Насунуть сверху" я взял на вооружение.
Ахах)
Евгений, я не хотел Вас обидеть! Юмор - это неотъемлемая часть нашей жизни, тем более программиста! Такие фразы становятся "крылатыми"!!!
Супер полезное видео, спасибо!
Спасибо! Видос очень полезный. По сути своеобразная шпаргалка, обязательная к применению!
Балдеж, спасибо за видео, смотрится на одном дыхании, речь поставленная, и при скорости 1,5 слова не смешиваются, все четко воспринимается мозгом. Очень рад, что наткнулся на твой канал, обязательно нажата кнопка подписки и лайки под каждым просмотренным видео. Сам являюсь джавистом, приходится квалифицироваться на фуллстек, css довольно скучно было изучать, до встречи с твоими видео. Еще раз огромное спасибо!
Спасибо большое за твой труд! Очень доступно и практично.
Пожалуйста!
Очень актуальная тема для новичков. Как всегда респект.
Я рад!
Большое спасибо! Очень полезный урок. Все подробно и грамотно.
Пожалуйста!
Просто красавчик. Мое почтение)
Как всегда просто идеальный урок! Всё ясно, понятно и доступно)) Вы несомненно лучший!
Что бы Я без Вас делал)))
Большое спасибо! 💪
Рад что полезно!
Шикарное видео! Подписка оформлена
Очень полезная информация. Единственное что кажется было бы уместно перенести этот урок в начало плейлиста. Так как пройдя моря практики только потом детально узнаешь о падингах и мерджинах. К этому уроку уже сам практически все понимаешь, исследуя это методом тыка (что долго). Если это давать в начале, ускорит обучение. Спасибо за контент!
Согласен. Всё-таки это основы основ.
Очень круто. Большое спасибо .