Как сделать внутренний и внешний отступ у элементов в HTML-разметке на CSS

В рамках данной статьи речь пойдет о некоторых основных правилах верстки, а конкретно об организации отступа возле HTML элементов: текст, изображение, таблица и т.д. В материале нет ничего сложного или экстраординарного, главное четко следовать предложенных рекомендациям и понимание описанных принципов придет само собой.

Для начала, неплохо было бы вставить набор указанных ниже свойств в главный файл стилей (в самый верх) на сайте:

Нужно это для того, чтобы подкорректировать отступ у добавляемого элемента. Например, взгляните на такой кусочек кода:

А теперь посмотрите на картинку ниже и вы увидите, как в конечном итоге будет выглядеть ваш элемент с используемыми вначале свойствами, и без них:

Что же мы видим?
Первый вариант не совсем правильный, ведь длина «фантомной» части элемента куда больше его полезной части. Иными словами, рамка выходит за пределы текста и это не лучшим образом скажется на дальнейшей верстке.

Второй же вариант более удобоварим и выглядит эстетичнее, но и с таким приемом нужно быть аккуратным, ведь если применить его в уже готовом сайте весь дизайн может «поехать» и повлечь дополнительную головную боль — нам это, конечно, ненужно.

Далее мы приведем наглядные примеры с вариантами отступа у тех или иных элементов.
Внутренний отступ с помощью CSS-свойства «padding»
Обратите внимание на данный фрагмент:
Вот его стили:
Конечный вариант выглядит вот так:

В данном случае свойство Padding призвано с целью организовать внутренний отступ в используемых элементах — допустим, добавим к нему значение в 10px:
Взглянем на визуальные изменения:
Значение в 10 пикселей добавляет каждой из четырех сторон элемента соответствующий отступ. По желанию величина может быть изменена на любую другую, поддерживаемую системой — скажем, на проценты.

На практике указать стороны, к которым нужно сделать отступ, можно двумя вариантами.
1) Использовать явное указание:
Здесь каждая сторона имеет своё свойство дабы форматирование элемента было правильным и он сам не косил в разные стороны.
2) Второй вариант выглядит вот так:
Здесь мы видим перечисление значений по часовой стрелке: вверх-вправо, вниз-влево. В случае если значений несколько, они зеркально уходят вниз и влево — с этим должно быть всё понятно. Однако если одной из сторон вы не хотите задавать отступ, её значение выставляется как «0».
Такой тип отступов наиболее подходит для текстовой информации: текста, таблиц, ячеек и т.д. Чтобы разделить сами элементы, потребуется несколько иное свойство, которое мы приведем ниже.
Внешний отступ с помощью CSS-свойства «margin».

При использовании свойства «margin» отступ добавляется не в самой структуре элемента, а вне его, а вариантов добавления, как и в предыдущем методе, здесь также несколько.

1) Использовать явное указание:
2) Во втором способе идет перечисление имеющихся значений:
Описывать все нюансы работы с данным свойством бессмысленно, поскольку они схожи с вышеописанным «Padding» — просто соотнесите инструкции и используйте их в едином ключе.
Применить «margin» рекомендовано примерно следующим образом:
А визуально это смотрится так:

Здесь наглядно показан именно внешний отступ от двух текстовых элементов — они разделены между собой на определенном расстоянии.

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

Оцените статью
SEO
Добавить комментарий

Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности