Как реализовать отступ между ссылками в 25 пикселей

Обновлено: 05.07.2024

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

Блок . Свойство margin

Итак, свойство margin задает отступ снаружи от границы элемента.

Давайте посмотрим, как это выглядит на практике.

Для начала приведу вам два вложенных друг в друга блока без margin (они слипнутся и мы увидим двойную границу):

Так код будет выглядеть в браузере:

А теперь давайте зададим margin в 30px внутреннему блоку:

Так код будет выглядеть в браузере:

Для определенной стороны

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

Давайте поставим левый отступ в 30px с помощью margin-left:

Так код будет выглядеть в браузере:

А теперь верхний отступ в 30px с помощью margin-top:

Так код будет выглядеть в браузере:

А сейчас одновременно правый отступ 30px с помощью margin-right и нижний отступ 10px с помощью margin-bottom

Так код будет выглядеть в браузере:

Блок . Альтернативный вариант для разных сторон

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

Четыре значения

Давайте посмотрим на примере, как работает margin, когда ему задано четыре значения. Пусть у нас сделано так: margin: 10px 20px 30px 40px. В этом случае 10px это отступ сверху, 20px - справа, 30px - снизу, 40px - слева. То есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево.

Этому правилу следует подавляющее большинство CSS свойств (кроме border-radius, у него все начинается с верхнего левого угла и тоже идет по часовой стрелке, то есть, в принципе, и тут все похоже).

Так код будет выглядеть в браузере:

Два значения

Если передать свойству margin два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе - одновременно и справа, и слева.

Давайте посмотрим пример:

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если передать свойству margin три значения, то первое будет задавать отступ сверху, третье - отступ снизу, а второе - одновременно отступ слева и справа.

Давайте посмотрим пример:

Так код будет выглядеть в браузере:

Значение auto

Свойство margin применяется не только для задания отступов, но и для центрирования блочных элементов. Для этого правый и левый margin следует задать в значение auto.

В примере ниже внутренний блок станет по центру:

Так код будет выглядеть в браузере:

Имейте ввиду, что таким образом можно центрировать только блочные элементы (для строчных используйте text-align), только по горизонтали и только, если им задана ширина.

Давайте перепишем пример в сокращенной форме через одно свойство-сокращение margin (первое значение будет задавать верх-низ, а втрое - право-лево):

Так код будет выглядеть в браузере:

Если нам нужны разные верхний и нижний отступ margin, то можно передать три значения: первое задаст верхний отступ, третье - нижний, а второе задаст значение auto для правого и левого отступов:

Так код будет выглядеть в браузере:

В принципе, можно написать и четыре значения таким образом: margin: 30px auto 10px auto, но с тремя значениями писать все-таки меньше (зато сложнее понять).

Блок . Свойство padding

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

Работает оно по такому же принципу - есть свойства padding-left, padding-right, padding-top и padding-bottom, которые задают отступ для разных сторон. Также для свойства padding можно задавать 1, 2, 3 или 4 значения по такому же принципу, как и в margin.

Единственное отличие - это то, что значения auto для свойства padding не существует.

Давайте теперь посмотрим на примерах, как работает свойство padding. Для начала приведу блок без отступов (у него текст прилип к границам):

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

А теперь зададим padding в 30px для всех сторон:

Так код будет выглядеть в браузере:

Свойство padding для определенной стороны

Давайте зададим отступы, используя padding-left, padding-right, padding-top и padding-bottom:

Так код будет выглядеть в браузере:

Блок . Свойство padding для разных сторон

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

Четыре значения

Так код будет выглядеть в браузере:

Два значения

Так код будет выглядеть в браузере:

Три значения

Так код будет выглядеть в браузере:

Блок . Расширение элемента

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте).

В следующем примере оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого - нет. Посмотрите, как отличаются их размеры:

А сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 20px, а у первого - нет. Посмотрите, как отличаются их размеры:

Блок . Свойства outline и box-sizing

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

Блок . Работа с маркерами списков

Мы с вами еще в начале книги разбирались со списками ul и ol и вы наверняка помните о том, что список ul имеет маркеры в виде точек, а ol - в виде цифр. Однако, вид этих маркеров можно сменить или даже убрать их совсем.

Например, для списка ul можно сделать маркеры в виде квадратов или кружков, а для списка ol - нумерацию не только в виде цифр, а в виде латинских или греческих букв.

Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul:

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Значение none

Значение none убирает маркеры совсем:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Значения для списка ol

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

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

А теперь сделаем нумерацию не числами, а маленькими латинскими буквами:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Весь список возможных значений для ol очень большой и я не буду приводить его здесь. Смотрите его в справочнике CSS для свойства list-style-type.

Блок . Маркер в виде картинки

Можно также задавать свои маркеры. Для этого необходимо иметь картинку, которую вы бы хотели сделать для маркеров списка, и подключить ее с помощью свойства list-style-image: url("путь к картинке").

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Блок . Позиция маркеров списков

По умолчанию маркеры списка не входят в сам список .

Чтобы понять, что имеется ввиду, давайте разберем следующий пример. В данном случае тегу ul обнулен padding и, казалось бы, маркеры списка должны прижиматься к границе блока, но они вылазят наружу! Это говорит о том, что не они реагируют на padding, а текст списка:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Такое поведение можно поменять, если воспользоваться свойством list-style-position, которое принимает два значения: outside (то, что мы видим по умолчанию) и значение inside, которое делает так, что маркеры оказываются внутри списка:

Так код будет выглядеть в браузере:

Первый пункт.
Второй пункт.
Третий пункт.
Четвертый пункт.
Пятый пункт.

Блок . Свойство list-style

Существует также свойство-сокращение list-style, которое позволяет одновременно задать тип маркера, его позицию и картинку.

Блок . Ограничение высоты и ширины

Блок . Свойство display

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

Блок . Свойство float

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

В этой статье пойдёт речь о двух CSS свойствах: margin и padding. Оба они задают отступ. Но в одном случае это внешний отступ от других элементов, а во втором - внутренний отступ от содержимого. Эти свойства являются одними из наиболее часто используемых при создании сайтов. Разберём каждое по отдельности.

Внешний отступ (margin)

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

Свойство margin может принимать ещё и значние "auto". Это значение центрирует элемент по горизонтали.

С помощью значения auto у margin можно центрировать только блочные элементы. Для строчных используйте text-align: center.

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

Внутренний отступ (padding)

Внутренний отступ можно сделать через CSS свойство padding. Оно принимает значения аналогично свойству margin. Можно указать от одного до четырёх значений, чтобы задать разные отступы для разных сторон. Для демонстрации результатов работы этого свойства используем текст с выравниванием во всю ширину контейнера (text-align: justify;) Результат будет таким:

Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.

padding-left - отступ слева
padding-right - отступ справа
padding-top - отступ сверху
padding-bottom - отступ снизу

Проблема расширения (box-sizing)

У свойства padding существует проблема. Это свойство расширяет элемент на величину отступа. Для наглядности создадим два одинаковых по ширине элемента "width: 200px;", но у одного установим свойство padding: В браузере получится такой результат: Оба элемента имеют одинаковую ширину "width: 200px;". Но нижний на 60 пикселей шире из-за того, что слева и справа есть отступ padding (по 30 px каждый), который расширяет этот элемент. Чтобы такого не происходило, необходимо задать элементу свойство box-sizing в значении border-box (по умолчанию оно в значении content-box): Тогда вместо того, чтобы раздвигать границы элемента, будет сужаться область внутри него.

Расширение элементов из-за внутреннего отступа padding иногда сильно мешает. Особенно при создании мобильных версий сайтов. Из-за них чаще всего на мобильных устройствах появляется горизонтальная прокрутка. Поэтому заранее убедитесь, что поставили свойство box-sizing в значение border-box для самых больших элементов на странице .

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

CSS Padding

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

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

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

Краткая запись свойства 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 пикселей слева и справа от документа (горизонтальные отступы).

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

Отступы в 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;

Пример:

</style></head> <body> <div> Агния Барто - стихи Я на уроке в первый раз. Теперь я ученица. Вошла учительница в класс,- Вставать или садиться? .

Результат:

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

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

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

Свойства:

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

Значения:

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

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

Пример:

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

Результат:

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

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

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

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

Значения:

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

Пример:

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

Значения:

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

Пример:

</style></head> <body> Теперь я ученица. Вошла учительница в класс,- Вставать или садиться? Не знала я сначала, И я не знала, как вставать, Чтоб парта не стучала.

Результат:

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

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

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

Значения:

Для каждой стороны границы можно задать свой стиль:

Результат:

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

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

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

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

outline-color (цвет)

Значения:

outline-width (ширина)

Значения:

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

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

Значения:

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

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

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

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

Пример:

Результат:

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

Пример:

Результат:

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

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

Читайте также: