Why is chrome highlighting a margin that is not listed in styles or computed

Question

There are no margin styles being shown under "styles", and as you can see it doesn't show any being computed either. No idea what's going on here but I noticed this right after changing the width of the element to 90%. I'm using foundation so maybe its some competing styles?

I'm not asking how to fix my specific issue which is why I've posted no code. I'm just confused why chrome would highlight a margin when its not showing any to be computed

Answer 1

This is caused by the display: block rule.

The element is occupying the entire horizontal space of its parent, so Chrome tries to convey that by coloring the occupied space with the margin color.

Change the rule to either display: inline-block or display: inline to remedy the issue.

Answer 2

My guess here would be that the containing small-4 possibly has a padding? Or Chrome is trying to be smart.