Display та Box-sizing
Властивість display визначає, як елемент відображається на сторінці. Вона дозволяє змінювати поведінку елементів, наприклад робити їх блочними, інлайновими або гнучкими (flex).
block — елемент займає всю ширину рядка та починається з нового рядка. inline — елемент займає тільки необхідну ширину та не переносить рядок. flex — дозволяє зручно розташовувати елементи в ряд або стовпець.
Box-sizing визначає, як обчислюється розмір елемента. При значенні content-box ширина не включає padding та border. При border-box — включає, що робить розрахунок розмірів простішим.
Приклад display:
block
inline
1
2
3
Приклад box-sizing:
content-box
border-box