Проценты в CSS для padding и margin: Что они означают?

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

Содержание

заполнение и margin
Пример
Высота элемента
Основные правила
Эксперимент: Создание адаптивного виджета
Результат
Что должно получиться
Волшебство padding

заполнение и margin

Многие разработчики считают, что проценты для свойств padding и margin вычисляются относительно различных свойств родительского элемента. Однако, проценты для этих свойств всегда рассчитываются относительно ширины родительского элемента.

Пример

Рассмотрим следующий пример:

<div class="parent">
<div class="child"></div>
</div>

<style>
.parent {
width: 100px;
height: 150px;
margin: 2px;
padding: 1px;
border: 1px solid red;
}

.child {
margin: 10%;
padding: 10%;
border: 1px dashed blue;
}
</style>

Для вложенного элемента padding: 10% будет рассчитан как 10% от ширины родителя:

Child Padding = (Parent Width) * 10%

В данном случае результатом будет 10px, что подтверждается блочной моделью вложенного элемента.

Высота элемента

Следующий вопрос: «Как вычисляется высота вложенного элемента? Зависит ли она от ширины родителя?»

<div class="parent">
<div class="child"></div>
</div>

<style>
.parent {
width: 100px;
height: 150px;
border: 1px solid red;
}

.child {
height: 10%;
border: 1px dashed blue;
}
</style>

В данном примере высота вложенного элемента пропорциональна высоте родителя:

Child Height = (Parent Height) * 10%

Основные правила

margin и padding в процентах рассчитываются по ширине родительского элемента.
Высота (height) в процентах рассчитывается по высоте родительского элемента.

Эксперимент: Создание адаптивного виджета

Попробуем создать адаптивный виджет в виде окружности.

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="card.css">
</head>
<body>
<div class="row">
<div class="offset-md-3 col-md-6">
<div class="card">
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>

<style>
.card {
height: 300px;
background-color: #ffffff;
box-shadow: 0 20px 57px 0 rgba(51, 51, 51, 0.1);
border: none;
margin: 4%;
}

.outer-circle {
width: 100px;
height: 100px;
background: linear-gradient(to right, rgba(237, 114, 152, 0.4), rgba(236, 136, 113, 0.4));
margin: 0 auto;
border-radius: 50%;
}

.inner-circle {
width: 90px;
height: 90px;
background: linear-gradient(to right, rgb(237, 114, 152), rgb(236, 136, 113));
padding: 10px;
margin: 0 auto;
transform: translateY(6%);
border-radius: 50%;
}
</style>

Результат

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

Что должно получиться

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

Волшебство padding

Используя padding-bottom вместо высоты, можно добиться адаптивности:

<style>
.card {
background-color: #ffffff;
box-shadow: 0 20px 57px 0 rgba(51, 51, 51, 0.1);
border: none;
padding-bottom: 100%;
position: relative;
}

.outer-circle {
width: 20%;
height: 20%;
background: linear-gradient(to right, rgba(237, 114, 152, 0.4), rgba(236, 136, 113, 0.4));
margin: 0 auto;
border-radius: 50%;
position: absolute;
left: 40%;
}

.inner-circle {
width: 90%;
height: 90%;
background: linear-gradient(to right, rgb(237, 114, 152), rgb(236, 136, 113));
border-radius: 50%;
position: absolute;
left: 5%;
top: 5%;
}
</style>

Теперь padding-bottom работает как виртуальная высота, что делает блок действительно адаптивным.