What the heck does inherit, auto, revert, and initial css properties do?

Got an unexpected result of the bottom margin increasing when trying to undo the margin-bottom set on list items (<li>) by a CSS reset utility, and it seems that for non-inheritable properites ‘inherit’ is undefined and can do weird things. My main mistake of course was expecting it to ‘inherit’ to what was specified second-most specifically in the cascade rather than the most specifically, which isn’t a thing, rather than inheriting from a parent which is what it does. Nonetheless:

I instinctively used ‘inherit’ to get rid of the 1rem bottom margin that phoenix.css was adding to list items, but that seems to have unspecified consequences for properties that don’t inherit (including margin). Seems ‘revert’ is safest to default to as it will inherit if it’s inheritable, and go to the user agent’s styles if it’s not.


(Stay away from initial, i’d say, which goes all the way back to the specification, and that’s bad because that overrides people’s browser-defined styles which are likely to have been done for accessibility.)

(copied from my verbose commit message)