
Адаптивный треугольник в CSS
Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»
Свойство padding
позволяет задавать внутренние отступы элемента: от содержимого до края контейнера.
На скриншоте padding
подсвечен зелёным цветом.
Padding
может принимать следующие значения:
padding-left
— 10%. Фактически левый внутренний отступ будет 20px, т.к. это 10% от 200px.Свойство padding
не поддерживает отрицательные значения.
padding
Значение | Описание |
---|---|
padding-bottom |
Задаёт нижний отступ элемента |
padding-left |
Задаёт левый отступ элемента |
padding-right |
Задаёт правый отступ элемента |
padding-top |
Задаёт верхний отступ элемента |
padding |
Сокращённая запись, для установки всех свойств в одной строке |
padding
padding: 20px;
— внутренний отступ со всех сторон равен 20px.
padding: 20px 30px;
— первое значение для верха и низа, оно равно 20px; слева и справа по 30px.
padding: 10px 20px 30px;
— первое значения для отступа сверху, второе cлева и cправа, третье для отступа снизу.
padding: 10px 20px 30px 40px;
— значения применяются по часовой стрелке: сверху 10px, справа 20px, снизу 30px, слева 40px.
Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»
Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.