Свойства границы (border)
В предыдущем уроке были рассмотрены основные свойства border: ширина, цвет и стиль (solid, dashed, dotted). Существуют и другие значения стиля границы:
- double: Двойная сплошная линия.
- groove: Вдавленная граница.
- ridge: Выпуклая, объемная граница (противоположность groove).
- inset: Граница, будто блок вдавлен внутрь. Отображение может незначительно отличаться в разных браузерах.
- outset: Выпуклая граница, будто блок приподнят (противоположность inset).
Эти стили задаются отдельно для каждой стороны блока: border-top, border-right, border-bottom, border-left. Например, можно задать верхнюю границу точками серого цвета, а нижнюю – пунктирной красной линией.
Свойства отступов (padding и margin)
padding задаёт внутренние отступы – расстояние между содержимым блока и его границей. margin задаёт внешние отступы – расстояние между блоком и окружающими элементами.
Для padding можно задать значения для всех сторон: padding: 10px; (10 пикселей отступ со всех сторон), или индивидуально: padding-top, padding-right, padding-bottom, padding-left.
При указании значений для всех сторон в одном свойстве, порядок: верх, право, низ, лево. Например: padding: 10px 20px 30px 40px;.
margin работает аналогично padding: значение задаётся для всех сторон сразу или индивидуально для каждой стороны (margin-top, margin-right, margin-bottom, margin-left). Порядок значений такой же, как у padding.
Рассмотрены дополнительные значения свойства border, позволяющие создавать разнообразные границы, и свойства padding и margin, отвечающие за внутренние и внешние отступы блока. Ключевое отличие: padding задаёт отступ внутри блока, а margin — снаружи.