Html отступ от полей

Как в html сделать отступ текста?

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока , тег таблицы , абзаца , секции и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:
«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

• margin-left — расстояние слева
• margin-right — расстояние справа
• margin-top — расстояние сверху
• margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

• margin: 10px; — делаем отступ текста 10px со всех сторон
• margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
• margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

Источник

Изучаем поля и отступы в CSS на примере четырех HTML-элементов

HTML-свойство margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей ( рамкой ) указанного HTML-элемента .

Разницу между полем и отступом можно увидеть на следующем рисунке:

Также просмотрите демо-версию, чтобы лучше понять разницу между этими двумя свойствами.

Посмотреть демо-версию и код

У нас есть три элемента div . Первые два — со свойством HTML margin , а третий — со свойством padding . Расстояние между элементами div — это margin , а пространство между текстом внутри третьего элемента div и линией его границы — это padding .

Отступы в CSS — cинтаксис CSS-свойств padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin :

Этот код задает отступы во всех направлениях: отступ сверху CSS, отступ снизу CSS, отступ слева CSS и отступ справа CSS. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

• 10px — отступ сверху CSS;
• 20px — отступ справа CSS;
• 30px — отступ снизу CSS;
• 40px — отступ слева CSS .

Также можно установить отступ слева CSS и другие направления отдельно:

margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;

Примечание: Можно использовать для определения отступа px , pts , cm и т.д.

Синтаксис CSS-свойства padding

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin .

Для каждого направления в отдельности:

padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

Пример для установки полей и отступов в HTML-списке

Во вступительной части я показал свойства margin и padding , используемые в элементе div . В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div . Он содержит пункты меню в виде гиперссылок.

Список задается и другими свойствами CSS , но без использования свойств HTML margin и padding он будет выглядеть так:

Посмотреть демо-версию и код

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

padding: 10px; margin: 2px; text-decoration: none; color: #fff; background-color: #DA8119; display:block;

Демонстрация полей на примере HTML-таблицы

Ниже приводится пример использования свойства padding в HTML-таблице . Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS . Сначала посмотрите, как выглядит таблица без применения свойства padding :

Посмотреть демо-версию и код

Добавив поля, мы получим таблицу, которая будет выглядеть следующим образом:

Посмотреть демо-версию и код

padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;

Пример использования полей и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

Свойство padding , примененное к текстовому полю, задает пространство между курсором внутри текстового поля и его границей. margin добавляет отступы между различными текстовыми полями или другими элементами формы.

Чтобы стало понятнее, я создам форму и покажу разницу между полями с использованием свойств margin и padding и без. Первоначальный внешний вид формы без применения свойств margin и padding :

Добавив поля к классу текстовых полей и классу кнопки btn , мы получим форму, выглядящую следующим образом:

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin . В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding , мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “ Save ” мы также применили свойство padding :

которое используется для выравнивания текста во всех направлениях.

Источник

Расстановка полей и отступов в CSS

В этой статье я хотел бы рассказать, как правильно расставлять поля ( padding ) и отступы ( margin ) в CSS.

Прежде всего давайте вспомним определение полей и отступов согласно спецификации W3C. В боксовой модели ( box model ) поля — это расстояние между контентом ( content ) и границей блока ( border ). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина ( width ) и высота ( height ) элемента не заданы и не изменен алгоритм расчета размеров контента с помощью свойства box-sizing.

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

Теперь давайте рассмотрим как правильно расставлять поля и отступы между элементами. Возьмем в качестве примера следующий блок.

Это блок новостей news . Он состоит из заголовка, списка новостей и ссылки «Другие новости». Дадим им следующие названия классов: news__title , news__list и news__more-link .

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

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

Часто бывает так, что все элементы внутри блока имеют одинаковые отступы слева и справа, кроме одного, который вообще не должен иметь отступов, например, из-за фона. В этом случае для элемента можно задать отрицательные отступы. Тогда не придется убирать поля внутри блока для остальных элементов.

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

Учитывая это, задаем для заголовка отступ снизу, а для ссылки «Другие новости» отступ сверху.

.news__title < margin-bottom: 10px; >.news__more-link

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

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

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

Можно задать для каждой новости кроме первой отступ сверху, либо для каждой новости кроме последней отступ снизу. Первый вариант более предпочтителен, поскольку псевдоселектор :first-child был добавлен в спецификации CSS 2.1 и имеет более широкую поддержку, в отличие от псевдоселектора :last-child , который был добавлен только в спецификации CSS версии 3.0.

.news__list-item < margin-top: 18px; >.news__list-item:first-child

Таким образом, правильная расстановка полей и отступов позволяет гибко менять внешний вид любого блока без внесения изменений в стили и без нарушений в дизайне. Самое главное — определить, какие элементы блока являются основными (обязательными), а какие опциональными.

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

В этом случае можно использовать следующий способ задания отступов.

.popup__header + .popup__text

Тогда отступ появится, только если будут использоваться оба элемента. В случае же вывода только заголовка или только текста, лишнего отступа не будет.

Схлопывание вертикальных отступов

Еще один нюанс, о котором не все знают, связан с вертикальными отступами между соседними блоками. В определении отступов, которое я приводил выше, сказано, что отступ — это расстояние между границами текущего и соседнего блока. Таким образом, если мы расположим два блока друг под другом и зададим одному из них отступ снизу в 30px , а другому отступ сверху в 20px , отступ между ними будет не 50px , а 30px .

То есть произойдет наложение отступов, и отступ между блоками будет равен наибольшему отступу, а не сумме отступов. Этот эффект также называют «схлопыванием».

Прошу заметить, что горизонтальные отступы, в отличие от вертикальных, не «схлопываются», а суммируются. Поля ( padding ) также суммируются.

Зная о «схлопывании» отступов, мы можем использовать эту особенность в свою пользу. Например, если нам необходимо расставить отступы для заголовков и текста внутри статьи, то для заголовка первого уровня зададим отступ снизу в 20px , а для заголовка второго уровня отступ сверху 20px и снизу 10px , а для всех параграфов зададим отступ сверху 10px .

Теперь заголовок h2 можно расположить как после заголовка h1 , так и после параграфа. В любом случае отступ сверху не будет превышать 24px .

Общие правила

Подводя итог, я бы хотел перечислить правила, которых я придерживаюсь при расстановке полей и отступов.

1. Если соседние элементы имеют одинаковые отступы, то лучше задавать их родительскому контейнеру, а не элементам.
2. При задании отступов между элементами, следует учитывать, обязательный это элемент или опциональный.
3. Для списка однотипных элементов — не забывать о том, что число элементов может варьироваться.
4. Помнить о наложении вертикальных отступов и использовать эту особенность там, где она принесет пользу.

Источник