Skip to content
Submitted over 3 years ago

HTML, CSS

Rachel Mozzetta•135
@Mozzarella-chz
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am still struggling to understand when to use margin vs. padding. In this challenge I only used margin. I really dont know if this kind of coding would be "passing" in a real world setting as the CSS feels clunky to me. But it is functional!

Code

Please log in to post a comment

Log in

Community feedback

  • Amon•2,560
    @A-amon

    Hello! You did a great job~ 👏

    Just a tiny suggestion, maybe try setting font-family:inherit; to the button so that it uses same font as the others. As for the margin vs padding, personally, I would use padding for what it is (internal spacing) and margin for external spacing (spaces between the element itself and neighboring elements). Here's a good article explaining the difference. 😉

    So let's say, I want to have the content of an element to have some spacing from the border, for instance, those .Luxury-block, .SUV-block and .Sedan-block, I would set padding to them instead of assigning margin to each individual items (img, .cars-text) inside of them. 😁

    And if I want to put some spacing between each of those block, I would use margin. For example, a margin-right:1rem; for a 1rem spacing between .Luxury-block and .SUV-block. ↔

    These are just how I would utilize padding and margin. 😀 It might vary between person, I think.

    Marked as helpful
  • bunee•2,020
    @buneeIsSlo

    Hey! @Mozzarella-chz, I initially had a tough time wrapping my head around margins and paddings too. However, This free course by Kevin Powell helped clear up a lot of confusions and questions I had. I've implemented everything I learned in this course into every single project I've made ever since, so I'd strongly recommend it.

    *Edit: I totally forgot to link the course, My bad.

    Hope this helps :) and Keep Coding!

    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