Page made with html and css flexbox.

Community feedback

• 

  Aaron Ragudos•480

  @RagudosPosted 7 months ago

  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

  0