Design comparison
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
- @A-amonPosted about 3 years ago
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 helpful2 - @buneeIsSloPosted about 3 years ago
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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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