[Из песочницы] Организация отступов в верстке (margin/padding)

Скрипты и советы | 18 октября 2017 2 753

Уроки CSS на Хабрахабре, habrahabr.ru, HTML

Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Читать дальше →
[Перевод] Всё, что вам нужно знать про CSS Margin

Одним из первых, что многие из нас усвоили, когда изучали CSS, были особенности разных составляющих блока в CSS,...

Подробнее
[Из песочницы] Организация адаптивной верстки в БЭМ с SCSS

Одна из главных сложностей возникающая у многих фронтенд-разработчиков при использовании методологии БЭМ в CSS — это...

Подробнее
[Из песочницы] Responsive design: сохранение формы элементов разметки

Одним из приемов адаптивного веб-дизайна является установка размеров элементов разметки в процентах относительно...

Подробнее
[Перевод] [ В закладки ] CSS: использование внутренних и внешних отступов

Если несколько элементов веб-страницы расположены близко друг к другу, то у пользователей возникает такое ощущение, что...

Подробнее
Немного о CSS свойством «background-image»

CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым...

Подробнее
Шпаргалка по верстке для больших и маленьких

Хочу представить вашему вниманию небольшую шпаргалку, в которой собраны решения некоторых из часто встречающихся...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями