@Ragudos
Posted
Hello, Sebastian. Great job! First, I recommend adding transitions for the "color" property as well to avoid the flickering effect, which is disturbing for the eyes.
As for your question, a padding is an extension of an element, almost like a width/height, but it acts like a margin. By this, I mean that a padding's location will contain the element's background color, border, etc.
You can think of it like the border-box model in CSS:
inner: content around inner: padding around padding: border around border: margin
The good thing about margin is that you can centralize objects using that:
// Let the browser decide how much margin the element will take horizontally. This means that its margin will be as large as the space it has horizontally.
margin-inline: auto;
So, with padding, since it wraps around the content, if we have a fixed width/height, adding it would squeeze our contents tighter to each other. While with margin, it would just move our element. Take note that sometimes a margin will not move our element because of resistance, for example, with flexbox, although it only occurs on certain cases.
Kudos!
Marked as helpful
