Browser developer tools: what is the Position of the HTML element?

Question

Modern Web Developer tools (in Chrome / FF / IE, eg.) provide a way to see the \"Box Model\" and \"Computed CSS Properties\" of a particular element. However;

Is the

Answer 1

In Chrome, Firefox, Edge and IE11+, when an element is selected, you can access this element in the console window by typing:

$0

You can then query and manipulate using the Javascript DOM API, which has a very useful method called Element.getBoundingClientRect().

So all you have to do is type the following into the console window when an element is selected:

$0.getBoundingClientRect()

and the browser will return an object such as:

{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }

Answer 2

Chrome dev tools -> Settings -> General -> Elements -> Show Rulers.

You can also install Chrome plugins that will give you a little more functionality.