универсальны контейнер для контента. Он не влияет на контент до тех пор, пока не будет стилизован с css. то есть этот тег помогает структурировать нам другие теги и прикольно компоновать их между собой. попробуйте этот код 👇
<div class="warning">
<img src="leopard.jpg"
alt="An intimidating leopard.">
<p>Beware of the leopard</p>
</div>
свойство display определяет тип отображения элемента. по умолчанию у каждого <div>display: block, то есть каждый элемент находится на своей строке, вот так 👇✨
но что если мы хотим сделать их в ряд? для этого нам нужно будет обернуть эти несколько тегов/элементов в тег <div> идобавить стиль display: flex. теперь в прямом смысле свойство flexпозволит нам управлять этим <div>, как мы захочем 😼 .
как вы видите наши элементы стали в ряд. это по умолчанию заложено при добавления стиля display: flex, то есть когда вы добавляете этот стиль, то по умолчанию скрыто добавляется и этотflex-direction: row, но есть ещё парочка свойств, который вы можете использовать
также есть такое свойство justify-content - отвечает за выравнивание элементов по оси/линии
ремарка* - без использования свойства display: flex, вы не можете использовать свойства flex-direction и justify-content. точнее можете, но работать оно не будет и только стили будут выглядеть грязнее 😅
margin и padding
что такое border мы уже учили, помните? это когда мы делали обводку вокруг разных тегов. margin - это внешний отступ от элемента, padding - это внутренний отступ от элемента. вот как это видит наш браузер
рассмотрим на примере. ниже слева видно абзац с padding: 30px вокруг него(пустое место вокруг текста). Зеленый цвет на изображении ниже справа – это padding, который расположен вокруг контейнера. то есть это расстояние которое мы сказали, чтобы было пустое вокруг нашего текста
теперь добавим margin абзацу. Я добавлю margin: 30px. Ниже на изображении слева показано, как этот абзац изменился с margin. Фактическая ширина изображения стала меньше, потому что margin отталкивает от границ другой HTML элемент. Справа видно, что оранжевый цвет – это margin вокруг элемента. margin всегда находится за пределами padding и темно-синий фон не распространяется на область margin
flex-direction: row; // в линию
flex-direction: row-reverse; // в линию наоборот
flex-direction: column; // в колонку
flex-direction: column-reverse; // в колонку наоборот
justify-content: flex-start; // слева
justify-content: flex-end; // справа
justify-content: center; // по центру
justify-content: space-between; // первый элемент в плотную слева,
последний вплотную справа, между
остальными равномерные отсутпы
justify-content: space-around; // равномерные отступы между
всеми элементами
/* Применяется ко всем четырём сторонам */
margin: 20px;
padding: 20px;
/* по вертикали | по горизонтали */
margin: 5px 10px;
padding: 5px 10px;
/* сверху | горизонтально | снизу */
margin: 5px 10px 7px;
padding: 5px 10px 7px;
/* сверху | справа | снизу | слева */
margin: 2px 10px 9px 6px;
padding: 2px 10px 9px 6px;
