Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.
Вставка
- Опубліковано 3 чер 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", а тут видос 30 минут назад вышел)
Ну тебе крупно повезло) попал к самому хорошему teacher'у
Круть, рад что вовремя)
Не "видос", а видео.
Величезне Вам «Дякую» за таку Гору детальної інформації , лайфхаків та практичних порад по уникненню «підводних каменів»
Не понимаю как вы можете говорить "Ну как полезно?" Ваши курсы самые полезные по Front-End-у которые я только видел!
Учусь в универе, и преподаватель объяснят хуже чем этот замечательный человек !!! Смотрю канал дополнительно для закрепления знаний , спасиботтебе дружище огромное, Челябинск на связи)
Ну наконец то до меня дошло, как пользоваться парой "padding + отрицательный margin". Спасибо! Как всегда наглядно и доходчиво! Уже можно школу открывать.
ни как не мог понять эти padding и margin мучился очень , и наконец то аллилуйя благодаря Жеке что то удалось понять ! Благодарю! Вы как всегда на высоте!
Да приумножит Ваши деяния Всевышний!
З.Ы.
какой олень поставил диз? кажись конкурент
завидуй молча фуцы!
Супер! Я рад что полезно! Дизы тоже интерактив)
поставили потому-что вообще не всекали о чем речь, просто набор звуков)))
Большое спасибо, особенно за советы как правильно задавать отступы:
1) От предыдущего элемента к следующему (сверху вниз, слева направо)
2) Обнулить отступ у последнего элемента группы (:last-child)
3) Отступы задаются самому верхнему родителю в конструкции (доме)
4) Margin не следует задавать независимым объектам (БЭМ-блокам) - используем микс блока и элемента
Лучшее видео про отступы на Ютубе
то чувство,когда купил курс в нетологии за 50к и долго не мог понять разницы паддинга и мэрджина. а тут на ютубе просто бесплатный и более качественный контент.
Спасибо!
юзай инспектор, благодаря инспектору многое сразу становиться понятно, там такие вещи интуитивно понятны
@@user-fp5jy5lv2s это то что в браузере показывает html и css код страницы, а ещё там есть консоль для контроля js. Правой кнопкой мышки на любом элементе страницы ну и далее "изучить элемент"/"просмотреть код", как то так
Прошло уже столько времени с момента выхода видео, а оно остается актуальным и по сей день. Курс просто отличный! Большое спасибо!!!
Спасибо большое! Возникла идея-предложение. Есть отличное видео про БЭМ, в котором все понятно, но когда начинаешь на практике строить структуру сразу все становиться сложнее. Было бы круто сделать второе видео к БЭМ в плейлист с тренингом практическим, где сверстать макет (можно сугубо тренировочный) в котором будут флексы, списки, какие то карточки итд и прямо разжевать БЭМ, где что как обозначаешь и называешь. Сам просто пересматривая стримы с версткой ставил на паузу кадры с кодом и разбирал как ты прописываешь блоки и элементы - и в итоге так научился нормально использовать бэм, но в самом стриме редко на этом заостряется внимание. Если получиться - я думаю, будет круто для тех, кто только будет знакомиться с БЭМ) Отличный выпуск, большое спасибо!
Схожая задача и вопросы. Тем не менее: сейчас нахожусь на стадии полного завершения настоящего пятистраничного тренировочного GRID-макета по БЭМ (без JS): сразу скажу, много вопросов отпадает по ходу и факту разработки одного такого макета. Он имеет в себе много ошибок, но именно тех ошибок, которые ты уже осознаёшь и скорее всего не допустишь. Далее: пересматриваешь крутые ролики ещё раз - инфо укладывается ещё лучше. Инфодрочерство хуже практики.
Где тут насыпать спасибо )) Блин, Дружище, огрооомная тебе благодарность! Ты делишься не только знанием в концентрированном виде, но ещё и мировоззрением, настроем и чем-то важным, что может и незаметно глазу! Успехов и счастья ) Живи, а работай в свободное время ;)
как можно так круто и понятно все это рассказывать?!!!
ты на вес золота!
Просто видео-энциклопедия!
Как же это круто) Лучший контент по обучению WEB разработке.
Спасибо!
Лучше уже никто не сможет объяснить) просто шикарно одно удовольствие учится у таких людей
Спасибо большое! Великолепный ты человек! Ты помогаешь менять свои судьбы в лучшую сторону. Очень жаль, что случилось 24 февраля и мои соотечественники напали на вашу страну, искренне надеюсь на то, что у тебя и у твоих близких все будет хорошо! Верю в вашу победу!
Огромное спасибо Вам за такую подробную и понятную теорию и практику. Я только на пути обучения. Ваши лекции сразу под запись с блокнотом делаю. Это лучшая подача информации.
и как успехи??по прошедшему времени уже должны работать в этой сфере???
@@user-ei8ib3mq2q .минимум 6 месяцев даётся на обучение с утра до вечера. В таком режиме можно выучить быстрее. Кто совмещает идут по другому пути
@@user-lp2zy8er4p я про верстку спрашивал))понятно что на фронт енд нужно не меньше года,а лучше полтора!верстать сложные сайты за какое время научились??и на счет с утра до вечера это всё бред((будет быстрое выгорание,идеально 4 часа в день 5 дней в неделю!!
Рад что живу в такое время , где можно зайти в интернет и найти столько годного обучающего контента, что жизни не хватит что бы выучить
это всё.
Информация - огонь. Подсказка с запоминанием по часовой стрелке - класс. Чувствую себя тупым, что сам не додумался
Спасибо за такие видео!
Делай ещё!
Благодари тех кто создал такие технологии и возможности. Но они почему то для вас злейшие враги
@@Yupitrer Кого благодарить? Создателя интернета? Создателя ютуба? Шо ты несёшь?
@@aleksandrhan6208 Именно. Почему бы и нет. Тот кто развивает технологии тот и рулит, того и поддерживают. Я радиотехник, и в 2010м задумался почему нет отечественных компонентов? Начал искать, а оказалось что заводы СССР которые это все изготовляли имеют такой вид как сейчас драмтеатр в Мариуполе. Это же пиздец?
@@Yupitrer Я согласен с тобой. Я думал ты начнёшь мне про россию рассказывать...
Я знал, что этот ролик в пол часа, я буду смотреть несколько часов! Очень много информации, спасибо!
Наконец-то я хоть что-то начал понимать в этих падингах и мерджинах!
Спасибо тебе, Жекич!
Лучшее объяснение из тех, что мне приходилось видеть и слышать, белиссимо !
Этот урок особенно прекрасен, а прекрасен он тем, что я его смотрел не как папуас, следящий за сборкой шатла, а как специалист, который это уже давно знает и умеет))))
Женя, как всегда качественный контент, даже если кажется, что уже все знаешь заходишь на канал и раскрываешь рот от удивления!
Спасибо. Я думал что я знаю эту тему. Понял что не очень. Спасибо Женя!
Очень рад, что начинает появляться подробный материал про основы!
Спасибо Евгению за ролик!
Интересно смотреть такие туториалы от Акежа, благодарю за информативность :)
Спасибо Женя, как мне нравятся твои короткие но очень понятные ролики, ты лучший, успехов тебе!!!
Этого урока реально не хватало. Спасибо большое, Жека!
Спасибо, очень полезно! Век живи - век учись!
В видосе нашел 2 фичи о которых не знал и нашёл то что искал где паддинг 15 и марджин -15. Очень полезный контент, дай бог автору здоровья и сил!
Как всегда твой контент на высоте - наглядно и доходчиво. Будь здоров!
Евгений спасибо большое, за очередное и как всегда полезное видео!!!
Спасибо большое, за ваши старания! Очень познавательно, доступно, интересно и хочется с огромным желанием учиться дальше! Круто, что есть такие люди, как Вы!
Сейчас прохожу курс менторинга и делаю проэкт по верстке. И видео Жени нереально полезны. А шпаргалки просто незаменимы. Постоянно заглядываю, и чем больше заглядываю, тем реже нужно))
Максимально понятно и доступно👍 Спасибо за такие крутые роллики))
"твердый" лайк))
Супер урок! Спасибо за такой труд -подготовка к уроку, объяснение и эмоциональная поддержка!)))
Гениально и просто! Подача материала шикарна!
Лучший. Безусловно, спасибо за урок!
Очень хорошо дополняет урок из курса, больше практики.👍
Ситуация прояснилась! Это нереально ценный выпуск, благодарю =)
Поздравляю с 100к 🥳🥳🥳
Женя спасибо тебе за ролик сначала думал что мало чем удивишь но ты как всегда удивил)
Жека, ты просто огонь 🔥 🔥 🔥
«Казалось бы, что может проще…»🤦♂️. Респект и уважуха ✊
Благодарю, как всегда на высоте! :) а главное - все получается!
Супер мега полезный урок, спасибо!
Спасибо! Интуитивно так и делала, но теперь есть система, все благодаря вам! Мега крутой контент!!!
Спасибо вам Евгений. Как всегда урок получился очень полезным и интересным.
Я считаю вас своим сенсейем 👍
Видео ооооочень классные!! Пересмотрела уже все - спасибо огромное!!
Замечательный урок! Столько полезного узнала. Спасибо, огромное!
Ютуб модераторы через пару лет: Хм, что за видос с 153023 лайками и 0 дизлайков? А, это Евгений опять новое видео выпустил). P.s. Очень полезная и усваиваемая пища. Все в стиле шеф-повора Жеки)
Ух, спасибо!
Cook.)
Чем больше смотрю видео, тем интересней! Назревает интрига )
Спасибо вам за эти видео! Выручают!
Супер! Думала, что все знаю, а оказалось, что много нового. Спасибо тебе!
Ох, спасибо! Вы лучший учитель в WEB разработке! Спасибо!
Вже третій раз хочу передивитися, щоб добре засвоїти. Дуже дякую за гарно поданий матеріал.
Отличная подача! Всё по полочкам))) Спасибо!
Много полезных советов. Спасибо.
Благодарность и Уважение автору, лучший канал!
хороший урок!
очень здорово, что уделил внимание рассмотрению вопросов, касающихся внешних и внутренних отступов!
Каждый день жду ваших роликов, а когда увидел новое видео, радость переполняло меня!
Я рад!
Спасибо!!! Только благодаря этому уроку стало всё понятно про отступы.
И всё таки я до сих пор удивляюсь, насколько качественно вы делаете свои видео. Всё максимально подробно, с примерами да ещё и с юмором)
Бро ты объясняешь поэтапно. Это очень нужно для нормальноного изучения
Все верно, шаг за шагом
Спасибо! Нормально так, по делу. Понятно, на примерах, без воды.
Как обычно благодарю за важную информацию!)
Очень полезный урок, наконец-то все понятно теперь про отступы, подача контента, как всегда на высоте))
Супер объяснение. Всё отлично разжевано! Спасибо Евгений вам за колоссальный труд!
Мега-полезно и предельно понятно. Спасибо!
Спасибо! Видос очень полезный. По сути своеобразная шпаргалка, обязательная к применению!
Лучшие видосы. Разжовано до малейших мелочей, а ещё и разные лайфхаки покажет. Жека ты крут👍.
Как это уже принято на этом канале, очередной крутой видосик)) А радует то, что до некоторых моментов, лично у меня это назначение отступов сверху и справа, я дошел сам через многие часы практики. Спасибо тебе огромное. Уже с нетерпением жду вордпресса дабы разнообразить своё портфолио 😉
Огонь! Некоторые фишки не знал и ломал голову, выписал на память, аригато!
Крутяк, отлично подбираешь цвета для уроков!
Спасибо большое за ценные знания, которые Вы предоставляете. Верстаю давно, но четка структура использования появилась благодаря Вашим видео.
Супер!! Спасибо! Самый лучший канал по верстке!!!
Блин мужик, объясняешь божественно.
Спасибо вам , очень доступно и понятно , я так долго мучился с. ступами а тут прям гайд готовый.Успехов вам и здаровия
Да хранит вас Бог! Узнал много полезного для себя!)
Спасибо! Примеры наглядные и жизненные, использую в практике.
На выходных разбирался с Flex’ами, возник вопрос о применении padding’ов по БЭМ и семпай Жека молниеносно ответил на мой комментарий с вопросом, за это отдельное спасибо! А сегодня youtube предложил мне посмотреть это виде… прямо магия какая-то, очень кстати! Такую полезную информацию нужно обязательно добавлять в «избранное».
Леха, спасибо, очень ясно теперь все!
Информация на вес золота!
Евгений вы Топ по css html и js! спасибо Вам большое за то что Вы делаете!)
Один из самых важных уроков, которого не хватало для закрепления знаний об отступах. Ко многому пришел наблюдая за тем, как Вы применяете их в других видео-уроках, но теперь Вы подтвердили это) Спасибо большое!
не верил, что реально так долго буду учится, думал что брошу ИТ как и все бросал до этого. Возможно это потому что учитель хороший, спасибо, Жэка!!
Вы прекрасный преподаватель! Ни единого лишнего слова - и при этом, всё точно, подробно, и очень понятно. Редкое качество! Спасибо за такое полезное видео.
Фрилансер - спасибо тебе! Всё чётно и понятно, ничего лишнего!
Настоооолько годный контент, что иногда задумываюсь, а стоит ли писать комментарий и ставить лайк? Ведь станет еще больше просмотров и этот суперский материал увидит еще больше людей/конкурентов. Но в итоге ставлю лайк и оставляю комментарий, чтобы в будущем ты поделился еще более годным материалом. Очень полезная информация собрана и структурирована в одном месте! Благодарю за урок!
Спасибо! Ценю!
Все очень понятно. Спасибо за подробную лекцию!
Пожалуйста!
Как всегда Евгений на высоте! "Насунуть сверху" я взял на вооружение.
Ахах)
Евгений, я не хотел Вас обидеть! Юмор - это неотъемлемая часть нашей жизни, тем более программиста! Такие фразы становятся "крылатыми"!!!
Бомба! Дякую! Такий позитивний канал
Лучший за работой! Спасибо тебе!)
Пожалуйста!
Как всегда качественный материал. Спасибо вам за труды!👍
Спасибо!
Женя, це просто круто👍👍👍👍 Дякую, зараз стало все ясніше 😀😀😀
Спасибо за урок!🤘
Огромное спасибо тебе за потраченное время!
Казалось бы тривиальные вещи, но для новичков такое подробное описание просто неоценимо.
Большое...человеческое....спасибо!!!