Пойми, что каждый элемент - это блок из содержимого, внутреннего отступа, рамки и внешнего отступа, и освой box-sizing.
Открыть этот урок в KodokonВ CSS каждый элемент страницы - это прямоугольный блок, даже если ты его не видишь. У этого блока четыре слоя, как у картины в раме на стене: содержимое (сама картина), внутренний отступ (белое паспарту между картиной и рамой), рамка (сама рама) и внешний отступ (пустое пространство между рамой и другими картинами на стене). Это и называется блочной моделью.
Этими слоями управляют три свойства. padding задаёт внутреннее пространство, между содержимым и рамкой. border рисует рамку: ты указываешь ей толщину, стиль (solid - сплошная линия) и цвет. margin задаёт внешнее пространство, которое отталкивает соседние элементы. Все эти расстояния выражаются в пикселях (px).
.card {
padding: 16px;
border: 2px solid black;
margin: 24px;
}Каждую сторону можно настроить отдельно через padding-top, padding-right, padding-bottom и padding-left, и то же самое работает для margin. Есть и сокращённые записи: при двух значениях первое применяется сверху и снизу, второе - слева и справа. Так что padding: 8px 16px; означает 8 пикселей сверху и снизу, 16 пикселей слева и справа.
.card {
padding: 8px 16px;
margin-top: 32px;
margin-bottom: 8px;
}Классическая ловушка: по умолчанию, когда ты пишешь width: 200px; (свойство width задаёт ширину), эти 200 пикселей покрывают только содержимое. Внутренний отступ и рамка добавляются сверху! Блок с width: 200px, padding: 16px и border: 2px на самом деле занимает 200 + 16 + 16 + 2 + 2 = 236 пикселей по ширине. Свойство box-sizing: border-box; это исправляет: объявленная ширина тогда включает внутренний отступ и рамку. Блок действительно шириной 200 пикселей, а сжимается именно содержимое.
* {
box-sizing: border-box;
}
.card {
width: 200px;
padding: 16px;
border: 2px solid black;
}box-sizing: border-box какую общую ширину занимает блок с width: 100px, padding: 10px и border: 5px solid black?margin: 10px 20px;?