What is the box on inspect browser

Question

What does this purple box represent when inspecting element in inspect, because it is not a padding, margin or Border and occupies the space inside the div

[1]: https://i.stack.imgur.com/14nnb.png

Answer 1

You can think of it as space that belongs to an element that is not:

• padding
• margin
• border
• children

I might be missing some, but it's just space not used that has to be accounted for somehow. It comes up when you do a layout that isn't the result of sizing and padding and margins. So, for example, if you use the spacing features of flexbox or cssgrid then you'll see these purple spaces.