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
This is caused by the display: block rule.
The element is occupying entire horizontal space of it's 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.
My guess here would be that the containing small-4 possibly has a padding? Or Chrome is trying to be smart.
Totally get what you are talking about. What you are asking for is: Where can I see the rules for example “body { margin: 10px; }” that is somehow the default in Chrome. I only know this because when I set the margin to 0, I can see a substantial jump in my text’s indentation. Also as you mentioned in the Chrome there is a highlight that should not theoretically be there. Hence some default “padding” or “margin” being added. Not sure what level you on but you might want to look at the reset of these values to answer your question: https://css-tricks.com/reboot-resets-reasoning/
来源：https://stackoverflow.com/questions/36511434/why-is-chrome-highlighting-a-margin-that-is-not-listed-in-styles-or-computed