Меню

Как настроить отступы css

CSS урок 10. Отступ и граница элемента CSS

Отступы в CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

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

Внешние отступы в CSS задаются при помощи свойства margin , которое устанавливает величину отступа от границ текущего элемента до внутренней границы его родительского элемента.

Свойство:

  • margin-bottom (нижний отступ)
  • margin-left (отступ слева)
  • margin-right (отступ справа)
  • margin-top (верхний отступ)

Значения:

Краткая запись:

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

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

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

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

Свойства:

  • padding-bottom (нижний отступ)
  • padding-left (отступ слева)
  • padding-right (отступ справа)
  • padding-top (верхний отступ)

Значения:

Краткая запись:

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

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства border .

border-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Пример:

border-width (ширина границы)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

Пример:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатиричной системе)
  • transparent (прозрачная)

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

border:border-width border-style border-color; border: 1px solid #000;

Внешние границы (outline)

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

outline-color (цвет)

Значения:

  • red (цвет)
  • rgb(255,0,0) (в системе rgb)
  • #ff0000 (в шестнадцатеричной системе)
  • invert (инвертированный, противоположный)

outline-width (ширина)

Значения:

  • thin (тонкая)
  • medium (средняя)
  • thick (толстая)
  • значение

outline-style (стиль границы)

Значения:

  • none (без границы)
  • dotted (из точек)
  • dashed (пунктирная)
  • solid (сплошная)
  • double (двойная)
  • groove (трехмерная)
  • ridge (трехмерная)
  • inset (трехмерная с тенью)
  • outset (трехмерная с тенью)

Краткая запись:

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

Результат:

Двойная рамка с использованием CSS

Пример:

Результат:

Путь осилит идущий,

И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Источник

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

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

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

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

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

Читайте также:  Как настроить обои рабочего стола виндовс 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавив поля 10px для ссылок внутри

    :

мы получим следующий вид:

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

Весь класс для ссылок внутри элемента

    будет следующим:

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

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

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

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

Ниже приводится код стилей, которые используются для

. Весь код можно увидеть, перейдя по ссылке выше:

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

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

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

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

Поля для текстовых полей:

Поля для кнопки:

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

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

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

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

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

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

Источник



Как задать отступы в CSS

Дата: 08.05.2019 Категория: CSS Комментарии: 0

HTML элементы могут иметь два типа отступов: внутренние и внешние. Внутренние отступы элемента определяются свойством padding. Внешние отступы можно задать с помощью свойства margin. Давайте рассмотрим эти два свойства более подробно.

CSS Padding

Padding — это пространство между содержимым элемента и его границей. Свойство CSS padding принимает значение (например в пикселях), которое будет разделять содержимое элемента от его границы. Например padding: 20px задаст одинаковые отступы в 20 пикселей для всех сторон элемента.

Читайте также:  Как настроить цвет дисплея виндовс 10

Внутренние отступы для разных сторон

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

Краткая запись свойства padding

Как уже было сказано выше, вместо того, чтобы записывать значения отступов для каждой из его сторон (padding-left, padding-right), можно воспользоваться свойством padding и задать одинаковое значение для всех сторон.

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

В данном примере мы задали отступы по 10 пикселей по вертикали и по 20 по горизонтали. Первым указывается отступ сверху и далее идут отступы по часовой стрелке: правый, нижний и левый.

Если отступы два вертикальных отступа и два горизонтальных отступа равны, то эту запись можно сделать еще короче:

Свойство padding может принимать одно, два, три или четыре значения, разделенных пробелами.

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

CSS Margin

Margin это внешнее пространство элемента, так называемые внешние отступы. Обычно margin используется для того, чтобы отделить два или более элементов друг от друга. Свойство CSS margin принимает значение (например в пикселях) которое будет определять внешние отступы элемента. Например margin: 20px создаст внешние отступы от родительского и соседнего элементов равными 20 пикселям.

Внешние отступы для разных сторон

Вы можете определить индивидуальные внешние отступы для каждой из четырех сторон элемента используя свойства margin-top, margin-right, margin-bottom и margin-left. Давайте посмотрим на пример:

Краткая запись свойства margin

Для того, чтобы задать одинаковые внешние отступы для всех сторон элемента, вы можете воспользоваться краткой записью свойства: margin: 20px; Это создаст внешний отступ равный 20 пикселям для всех сторон элемента.

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

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

Это создаст внешние отступы по 10 пикселей сверху и снизу документа (вертикальные отступы), и отступы в 20 пикселей слева и справа от документа (горизонтальные отступы).

Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.

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

Источник

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

Сегодня мы поговорим с вами немного о принципах верстки, а именно – о способах организации отступа на вашем сайте у определенных элементов.

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

Если вы еще только создаете свой сайт, то я рекомендую вам в верх вашего главного файла стилей вставить следующие свойства:

Читайте также:  Как настроить время хонда иллюзион

Зачем это нужно, спросите вы? Отвечаю на ваш вопрос наглядным примером.

Допустим, у вас есть такой элемент верстки:

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

Что здесь видно? Что ширина элемента в первом варианте (без использования свойств) стала больше указанной за счет добавленных отступов, что является не совсем удобным и правильным в плане верстки.

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

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

Внутренний отступ с помощью CSS-свойства «padding»

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

со своими стилями:

Визуальный вариант получается таким:

Что из себя представляет свойство «padding»? Оно помогает организовать внутренний отступ в указанных элементах. Добавим к нашей верстке внутренний отступ, равный 10px:

Визуально это получается так:

Число 10 в свойстве говорит о том, что внутри указанных элементов с каждой из их четырех сторон необходимо добавить отступ, равный 10px. Пиксели (px) могут быть заменены на проценты или другую поддерживаемую в CSS величину.

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

Первый – это с явным указанием сторон:

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

Здесь идет простое перечисление значений, каждое из которых соответствует своей стороне. Стороны задаются так: первое значение – верх, второе – право, третье – низ и четвертое – лево, то есть все по часовой стрелке.

Если значения два[/b] (верх и право), то это значит, что зеркально эти же значения уходят вниз и влево и только так. Вроде бы все понятно. Если для какой-то из сторон вам не нужно задавать отступ – значение для этой стороны выставляете «0». Этот вариант мне нравится больше, так как он более компактный, но в своих начинаниях я использовал именно первый вариант.

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

Внешний отступ с помощью CSS-свойства «margin»

Отличительная особенность свойства «margin» – это то, что отступ добавляется вне элемента, то есть внешний.

Вариантов добавления здесь также два.

Первый – с явным указанием стороны:

Второй – с перечислением значений, каждое из которых соответствует своей стороне:

Здесь описывать все нюансы работы с правилами я не буду, все так же, как и о свойстве «padding», о нем написано выше.

Используем margin со следующим значением:

Визуально это будет выглядеть так:

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

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

Этот вариант отступов часто используется в тексте, а именно в оформлении параграфов, а также в элементах, которые имеют видимые границы.

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

Источник

Adblock
detector