Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS

Rachel Mozzettaโ€ข 135

@Mozzarella-chz

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Amonโ€ข 2,560

@A-amon

Posted

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

2
buneeโ€ข 2,060

@buneeIsSlo

Posted

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

1

Please log in to post a comment

Log in with GitHub
Discord logo

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