Как сделать красивую карточку с текстом на сайте | Box Model, padding и margin
Как сделать красивую карточку с текстом на сайте Почему блок вдруг стал шире? Куда пропали отступы? Почему margin ведёт себя странно? В этом видео разбираем фундамент CSS — Box Model и визуальную геометрию интерфейсов. Вы поймёте, как браузер считает размеры элементов и почему без border-box верстка ломается. На практике создаём минималистичную карточку в тёмном стиле и разбираем всё по шагам. Вы узнаете: — почему box-sizing: border-box используют в каждом проекте — что такое схлопывание margin (margin collapsing) — как работают сокращённые свойства (shorthand) — как устроены border и box-shadow — зачем нужен reset через селектор * — как применять правило 8px-grid для аккуратного UI Это фундамент, без которого невозможно делать аккуратные современные интерфейсы. ━━━━━━━━━━━━━━━━━━━ Полезные ссылки Полный курс по HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLeLdJcnxYFThC2nAtBRPsrX8ClU_TYQNi Полный курс по CSS: 👉 https://rutube.ru/plst/1483489/ Текстовая версия урока и материалы: 👉 https://soft-byte-learn.vercel.app/ Полезные разборы и анонсы — Telegram: 👉 https://t.me/+vn6d9rXnOMczN2Ni ━━━━━━━━━━━━━━━━━━━ Теги: #css #boxmodel #padding #margin #borderbox #boxshadow #cssснуля #верстка #frontend #webdevelopment #htmlиcss #cssдляначинающих #ui #webdesign #программирование
Как сделать красивую карточку с текстом на сайте Почему блок вдруг стал шире? Куда пропали отступы? Почему margin ведёт себя странно? В этом видео разбираем фундамент CSS — Box Model и визуальную геометрию интерфейсов. Вы поймёте, как браузер считает размеры элементов и почему без border-box верстка ломается. На практике создаём минималистичную карточку в тёмном стиле и разбираем всё по шагам. Вы узнаете: — почему box-sizing: border-box используют в каждом проекте — что такое схлопывание margin (margin collapsing) — как работают сокращённые свойства (shorthand) — как устроены border и box-shadow — зачем нужен reset через селектор * — как применять правило 8px-grid для аккуратного UI Это фундамент, без которого невозможно делать аккуратные современные интерфейсы. ━━━━━━━━━━━━━━━━━━━ Полезные ссылки Полный курс по HTML с нуля: 👉 https://www.youtube.com/playlist?list=PLeLdJcnxYFThC2nAtBRPsrX8ClU_TYQNi Полный курс по CSS: 👉 https://rutube.ru/plst/1483489/ Текстовая версия урока и материалы: 👉 https://soft-byte-learn.vercel.app/ Полезные разборы и анонсы — Telegram: 👉 https://t.me/+vn6d9rXnOMczN2Ni ━━━━━━━━━━━━━━━━━━━ Теги: #css #boxmodel #padding #margin #borderbox #boxshadow #cssснуля #верстка #frontend #webdevelopment #htmlиcss #cssдляначинающих #ui #webdesign #программирование
