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