×

Why do Inspect and Sketch show different position and size when an element has a border?

When you set border for a layer in your Sketch file, the position and size of the layer do not change in your Sketch file, however you will notice the position and size of the element in Inspect are different.

The position and size of the layer in your Sketch file depends on the border position in Sketch; this is because with Inspect, we're translating how the borders will actually be built by the developers. See below for additional information on how position and size will differentiate.

If the border position is set to “Inside” -
Position of the element in Inspect = Position of the element in Sketch
Size of the element in Inspect = Size of the element in Sketch

If the border position is set to “Center” -
Position of the element in Inspect = Position of the element in Sketch minus half of the border thickness
Size of the element in Inspect = Size of the element in Sketch plus the thickness of the border

If the border position is set to “Outside” -
Position of the element in Inspect = Position of the element in Sketch minus border thickness
Size of the element in Inspect = Size of the element in Sketch plus 2x the thickness of the border