Client

clientTop === window.getComputedStyle(elem).borderTopWidth

clientLeft === window.getComputedStyle(elem).borderLeftWidth

function getClientSizes (elem) {
  return {
    height: elem.clientHeight,
    width: elem.clientWidth,
    top: elem.clientTop,
    left: elem.clientLeft
  }
}

height
width
top
left
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, veritatis adipisci sit aspernatur beatae corrupti, est rerum doloribus quasi vel quaerat molestiae cum blanditiis nesciunt fugit maiores ex quo. Doloribus. Odio illum suscipit amet non! Maxime repellendus veritatis aperiam dolores quibusdam possimus quasi laborum dolore qui, voluptatibus numquam nobis, at eaque. Omnis accusantium culpa obcaecati velit vel a eos debitis! Repellat nam quam asperiores sapiente expedita sit fugiat consequatur quidem omnis quod architecto commodi tenetur consequuntur voluptatibus rerum ipsa illum, iure sequi magnam ratione eligendi quaerat excepturi? Minima, eaque corporis. Nesciunt doloribus, sed rem autem fugit corporis magnam cupiditate mollitia ipsa dolorum adipisci, obcaecati excepturi possimus soluta error aliquam eaque pariatur eos saepe nam eius repudiandae. Dolor ea in assumenda. Quam modi fuga perspiciatis possimus? Dignissimos esse neque ut distinctio odio quod, unde iure nam voluptas magnam asperiores voluptate fugit nostrum, quos eaque reiciendis! Voluptatum blanditiis facere obcaecati dolor odio.
margin-top
border-top
padding-top

height (content-area)

padding-bottom
▲ ▼
border-bottom
margin-bottom

clientWidth

clientHeight