tengo este trozo de codigo

 console.log(document.querySelector('.container').getBoundingClientRect())

 * { padding: 0; margin: 0; } main { margin: 0 auto; margin-top: 200px; width: fit-content; width: 300px; height: 300px; background-color: coral; border: 20px solid black; padding: 20px; display: block; } .container { background-color: cornflowerblue; width: 200px; height: 200px; margin: 0; }

 <main> <div class="container"></div> </main>

Estoy tratando de obtener el rectángulo delimitador del .container . Espero obtener 200px para el ancho y el alto y valores mayores que 8px para x, y, arriba y a la izquierda.

el cuadro azul es el .container , tiene un ancho y una altura de 200px y sus x e y desde la parte superior izquierda de la ventana gráfica deben ser mucho mayores que 8px .

según tengo entendido, el rect delimitador debería

devuelve un DOMRect que proporciona información sobre el tamaño de un elemento y su posición relativa a la ventana gráfica.

el rect delimitador que obtengo se ve así

 { bottom: 8, height: 0, left: 8, right: 950, top: 8, width: 942, x: 8, y: 8 }

Entonces, ¿por qué 8px para la x y por qué cuando claramente no son 8px como muestra la captura de pantalla?

¿Hay algo que me falta sobre cómo funciona la función getClientBoundingRect ?