HTML элементы могут иметь два типа отступов: внутренние и внешние. Внутренние отступы элемента определяются свойством padding. Внешние отступы можно задать с помощью свойства margin. Давайте рассмотрим эти два свойства более подробно.
CSS Padding
Padding - это пространство между содержимым элемента и его границей. Свойство CSS padding принимает значение (например в пикселях), которое будет разделять содержимое элемента от его границы. Например padding: 20px задаст одинаковые отступы в 20 пикселей для всех сторон элемента.
Внутренние отступы для разных сторон
Вы можете легко указать различные отступы для разных сторон элемента, таких как верхняя, правая, нижняя или левая сторона.
Например:
h1 {
padding-bottom: 10px;
}
p {
padding-top: 20px;
padding-left: 50px;
}
Краткая запись свойства padding
Как уже было сказано выше, вместо того, чтобы записывать значения отступов для каждой из его сторон (padding-left, padding-right), можно воспользоваться свойством padding и задать одинаковое значение для всех сторон.
Однако довольно часто требуется указать разные размеры отступов допустим для верхней и нижней части элемента, и для правой и левой. В таких случаях вы можете задать отступы следующим образом:
padding: 10px 20px 10px 20px;
В данном примере мы задали отступы по 10 пикселей по вертикали и по 20 по горизонтали. Первым указывается отступ сверху и далее идут отступы по часовой стрелке: правый, нижний и левый.
Если отступы два вертикальных отступа и два горизонтальных отступа равны, то эту запись можно сделать еще короче:
padding: 10px 20px;
Свойство padding может принимать одно, два, три или четыре значения, разделенных пробелами.
- Если установлено одно значение, оно применяется ко всем четырем сторонам.
- Если указаны два значения, первое значение применяется к верху и низу, а второе значение применяется к правой и левой стороне.
- Если указано три значения, первое значение применяется к верху, второе значение применяется к левой и правой стороне, а последнее значение применяется к нижней части.
- Если указано четыре значения, они применяются к верхней, правой, нижней и левой стороне соответственно в указанном порядке.
CSS Margin
Margin это внешнее пространство элемента, так называемые внешние отступы. Обычно margin используется для того, чтобы отделить два или более элементов друг от друга. Свойство CSS margin принимает значение (например в пикселях) которое будет определять внешние отступы элемента. Например margin: 20px создаст внешние отступы от родительского и соседнего элементов равными 20 пикселям.
Внешние отступы для разных сторон
Вы можете определить индивидуальные внешние отступы для каждой из четырех сторон элемента используя свойства margin-top, margin-right, margin-bottom и margin-left. Давайте посмотрим на пример:
h1 {
margin-bottom: 20px;
}
p {
margin-left: 10px;
margin-right: 30px;
}
Краткая запись свойства margin
Для того, чтобы задать одинаковые внешние отступы для всех сторон элемента, вы можете воспользоваться краткой записью свойства: margin: 20px; Это создаст внешний отступ равный 20 пикселям для всех сторон элемента.
Так же, вы можете задать индивидуальные отступы для каждой из сторон. Для этого перечислите их от верхнего до левого по часовой стрелке через запятую, вот так:
margin: 10px 20px 30px 40px;
Если верхний отступ совпадает с нижним, а правый с левым, вы можете сделать запись еще короче:
margin: 10px 20px;
Это создаст внешние отступы по 10 пикселей сверху и снизу документа (вертикальные отступы), и отступы в 20 пикселей слева и справа от документа (горизонтальные отступы).
Эта сокращенная запись может принимать одно, два, три или четыре значения, разделенных пробелами.
- Если установлено одно значение, оно применяется ко всем четырем сторонам.
- Если указаны два значения, первое значение применяется к верху и низу, а второе значение применяется к правой и левой стороне.
- Если указано три значения, первое значение применяется к верху, второе значение применяется к левой и правой стороне, а последнее значение применяется к нижней части.
- Если указано четыре значения, они применяются к верхней, правой, нижней и левой стороне соответственно в указанном порядке.
Оставить комментарий