CSS отступ текста и картинок слева, справа, сверху, снизу на простом примере

CSS отступ текста и картинок слева, справа, сверху, снизу на простом примере

Здравствуйте! Изначально хотел разделить эту статью на 4 маленьких, но потом задумался. Зачем? Ведь удобнее, когда такая информация собрана в рамках одного материала.

Поэтому сегодня мы узнаем, как сделать CSS отступ слева и со всех остальных сторон – справа, сверху и снизу. Их можно делать для картинок и текстов. Они бывают двух видов:

  • Внешние;
  • Внутренние.

Для первых используется ключевое свойства margin, для вторых – padding. Для наглядности сделал для вас небольшой пример. Чтобы визуально было удобно различать внутреннее и внешнее пространство добавил видимую таблицу. Взглянем, что получилось?

Внешние отступы

Прописав их в файле стилей CSS, получится задать ориентацию информационного блока на странице. Например, сдвину его влево и вниз. Давайте сразу продемонстрирую, как это будет выглядеть.

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

В целом можно применять нижеперечисленные варианты для задания отступов.

Слева (margin-left).

Справа (margin-right).

Сверху (margin-top).

Снизу (margin-bottom).

Сейчас покажу еще классный нюанс.

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

Внутренние отступы

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

Смотрим, что из этого вышло.

По аналогии с внутренними отступами в CSS внешние можно прописывать сокращенным кодом или для сторон по отдельности.

Padding-top.

Padding-right.

Padding-bottom.

Padding-left.

Это были основные моменты. Напоследок покажу, как еще можно облегчить некоторую работу.

Отступы на уровне выбранных тегов

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

p{

padding-left:150px;

}

Взглянем, что произошло после сохранения изменений.

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

На сегодня тема задания в CSS отступов слева, справа и по другим сторонам завершена. Вопросы остались? Их можете задать в комментариях, как и поделиться собственным мнением. Случайно не знаете более удобных способов? Будет здорово, если расскажете о них.

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

У меня в социальных сетях есть группы и страницы. Туда я периодически добавляю небольшие анонсы новых публикаций. Вы зарегистрированы в Вконтакте, Одноклассниках, Twitter или Facebook?

Дополнительно работает подписка на бесплатную рассылку информации по электронным адресам. Для подписки на блоге есть специальная форма. До связи.

Хочу оценить статью:
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Рейтинг: 5
Голосов: 2

Добавить комментарий

Комментариев - 0