В прошлой статье мы разобрали как работает "margin".
Осталось разобрать"padding".
Но перед этим необходимо задать размеры информационного блока, что бы внутри него перемещать информацию.
Для начала можем создать новый файл html и css, либо убрать прошлую информацию. Необходимо создать два блока. Первого назовем "page", а второй "box".
<div class="page">
<div class="box">
</div>
</div>
Код должен выглядеть так:
Переходим в css и прописываем следующий код:
.page{
max-width: 500px; \\Максимальная длинна объекта
max-height: 500px; \\Максимальная ширина объекта
width: 100%; \\Длинна в процентах. То есть использовать 100% из максимальной длинны.
height: 100%; \\Ширина в процентах
background-color: black; \\здесь я выбрал фоновый цвет блока (черный)
margin-left: auto; \\отступы, при использовании "auto" объект по середине
margin-right: auto; \\отступы, при использовании "auto" объект по середине
padding-top: 100px; \\отступ внутри блока "page"
}
.box{
max-width: 50px; \\Максимальная длинна объекта
max-height: 50px; \\Максимальная ширина объекта
width: 100%; \\Длинна в процентах
height: 100%; \\Ширина в процентах
background-color: green; \\Фоновый цвет блока (зеленый)
}
По итогу у вас должен получиться следующий результат:
Зеленый квадрат, это и есть "box". Мы задали ему определенные настройки.
Попробуем поставить зеленый квадрат по середине.
Конечно для этого можно использовать padding и работать с "page".
Для это нужно будет самостоятельно посчитать кол-во пикселей.
Но это муторно в некоторых проектах, по этому мы настроим сам "box"
И допишем уже знакомый код:
margin-left: auto;
margin-right: auto;
А вот что бы настроить высоту, придется самостоятельно прописывать на сколько px\% необходимо отпустить объект. Каждый блок занимает всю ширину строки. Для того что бы закрепить черный квадрат на месте, и настроить зеленый необходимо в "page" добавить display: flex;
А в "box" margin-top: auto; margin-bottom: auto;
Должно получиться так:
Вы можете так же настроить использую отступы margin и указывать кол-во пикселей.
Пример кода:
HTML
<div class="page">
<div class="box">
</div>
</div>
CSS
.page{
max-width: 500px;
max-height: 500px;
width: 100%;
height: 100%;
background-color: black;
margin-left: auto;
margin-right: auto;
display: flex;
}
.box{
max-width: 50px;
max-height: 50px;
width: 100%;
height: 100%;
background-color: green;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
Экспериментируйте, учитесь. В следующей статье разберем как добавить картинку и попробуем с ней поработать.
Остались вопросы - пишите в комментарии.
Всего доброго!