Войти
s-lub » Учебники » CSS » Поля и отступы (margin, padding)

Поля и отступы (margin, padding)

Поля и отступы (margin, padding)

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

Margin – это свойство отвечает за расстояние между блоками.

Padding – данное свойство определяет расстояние внутри блока, другими словами расстояние между содержимым блока и границами самого блока (если блока нет, то до краёв документа или экрана).

Расстояние желательно указывать в пикселях, но можно и в процентах.


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

Пример:
p {margin:70px;} – расстояние между блоками будет 70 пикселей.
p {padding:70px;} – отступы внутри блока будут по 70 пикселей.
p {margin:50px; padding:20px;} – расстояние между блоками 50 пикселей, а отступы внутри блока по 20 пикселей.

Пример разных расстояний между блоков, без сокращения:
p {margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 150px;}

Пример разных расстояний между блоков, с сокращением:
p {margin: 50px 60px 90px 30px;}
p {margin: 50px 150px;}

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