I had a bug-like issue with a div inside a 'a' tag.
<a href=''>
<div>..</div>
</a>
this <a> tag was inside a flex parent.
for some reason this <a> added a padding to the div(from right only). Padding wasn't shown in google chrome developer tools. But after trying many things I accidently tried the autosuggestion display: contents.
This removed that padding.
What is this display: contents do?
What does it do to <a> tag?
display: contentscauses an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.