У цьому розділі ми поговоримо про розміри елементів DOM, способах їх обчислення і метриках - різні властивості, які містять цю інформацію.
Ми будемо використовувати для прикладу ось такий елемент, у якого є рамка (border), поля (padding), і прокрутка:
У нього немає відступів margin. в цьому розділі вони не важливі, так як метрики стосуються саме розмірів самого елемента, відступи в них не враховуються.
Результат виглядає так:
Увага, смуга прокрутки!
В ілюстрації вище навмисно продемонстрований найскладніший і повний випадок, коли у елемента є ще і смуга прокрутки.
В цьому випадку смуга прокрутки «відсуває» вміст разом з padding вліво, відбираючи у нього місце.
Саме тому ширина вмісту позначена як content width і дорівнює 284px. а не 300px. як в CSS.
Точне значення отримано в припущенні, що ширина смуги прокрутки дорівнює 16px. тобто після її вирахування на вміст залишається 300 - 16 = 284px. Звичайно, вона сильно залежить від браузера, пристрої, ОС.
Ми повинні в точності розуміти, що відбувається з розмірами елемента при наявності смуги прокрутки, тому на зображенні вище це відображено.
Поля padding можуть бути заповнені текстом
На малюнку вище поля padding зображені порожніми, але текст там цілком може бути, наприклад, при наявності вертикальної прокрутки.
У елементів існує ряд властивостей, що містять їх зовнішні і внутрішні розміри. Ми будемо називати їх «метриками».
Метрики, на відміну від властивостей CSS, містять числа, завжди в пікселях і без одиниць виміру на кінці.
Ось загальна картина:
На зображенні всі вони насилу вміщаються, але, як ми побачимо далі, їх значення прості і зрозумілі.
Будемо досліджувати їх зовні елемента і всередину.
Ситуації, коли ці властивості потрібні, можна перерахувати по пальцях. Вони виникають дійсно рідко. Як правило, ці властивості використовують, тому що не знають засобів правильної роботи з координатами, про які ми поговоримо пізніше.
Незважаючи на те, що ці властивості потрібні найрідше, вони - самі «зовнішні», тому почнемо з них.
Уточнимо, що мається на увазі.
Коли браузер малює сторінку, то він вираховує дерево розташування елементів, інакше кажучи «дерево геометрії» або «дерево рендеринга», яке містить всю інформацію про розміри.
При цьому одні елементи природним чином малюються всередині інших. Але, наприклад, якщо у елемента варто position: absolute. то його розташування обчислюється вже не щодо безпосереднього батька parentNode. а щодо найближчого позиціонованого елемента (тобто властивість position якого не дорівнює static), або BODY. якщо такий відсутній.
Виходить, що елемент має на додаток до звичайного батькові в DOM - ще одного «батька з позиціонування», тобто щодо якого він малюється. Цей елемент і буде у властивості offsetParent.
Властивості offsetLeft / Top задають зсув щодо offsetParent.
У прикладі нижче внутрішній