Skip to content
Submitted about 1 year ago

Page made with html and css flexbox.

Higor Sebastian•50
@HigorSAS
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of being able to do this without much difficulty. Next time I would like to use css grid

What challenges did you encounter, and how did you overcome them?

The challenge I had the most was spacing the link buttons. I tried to keep the spacing as close to the original as possible.

What specific areas of your project would you like help with?

I would like some help in terms of knowing which padding or margin is better, this is what made me struggle the most.

Code

Please log in to post a comment

Log in

Community feedback

  • Aaron Ragudos•480
    @Ragudos

    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

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord