I am working on a project where, on different parts of the site, the absolute pixel values of fonts and margins are rendered differently, although they are the same when comparing the values. For example:
Both parts of the site have the following style:
margin-bottom: 10px;
font-size: 10px;
The Chrome debug tools say that the computed values are the exact same (10px), however, one of the two fonts is noticeably smaller (nearly two times), and same goes for the margin. It seems like the computed pixels are somehow smaller, but I have no idea what could be the reason for this behaviour.
The site uses bootstrap. If I move the element which gets rendered smaller up in the DOM tree, next to the other element, they appear the same. Therefore, it must have something to do with the parents styling. I however know of no property that could cause such behaviour.
Any tips are welcome. Kind regards
Make sure the parent doesn't have a transform: scale on it!