Оразмеряване на CSS блокове

Размери на CSS блокове

Общият размер на всеки блок е сумата от няколко стойности на свойствата. Кое може да се разгледа на диаграмата:

Задаване на размери на блокове

По този начин научихме, че общите размери не са нищо повече от сумата от стойностите на всички свойства, изброени по-горе. И ние можем лесно да манипулираме всички тези свойства.

Имот за оразмеряване на кутията

Те няма да ви позволят да направите това, поради една проста причина, защото общият размер на блока включва всички полета и граници и следователно няма достатъчно място за втория блок.

Можем да решим това, като просто изчислим колко пространство ни е необходимо за границата и подложката и ги изваждаме от свойството width. Но има и друг начин: в този случай можете да използвате собствеността размер на кутията: бордюр

Ако приложим правилото box-sizing: border-box към css блока, тогава не е необходимо да изчисляваме вътрешната подложка и граница, тъй като в този случай те ще бъдат включени в стойността на ширината и ние можем безопасно да подредим подложката и границата, ако е необходимо, без страх, че блоковете няма да се поберат. Но това правило не отговаря на собствеността марж. Следователно, ако трябва да добавите външен марж между елементите, изчислете колко трябва да извадите от свойството width;

Забележка: Ако това свойство не работи за вас в браузъра Chrome, добавете това правило за него отделно.