Design comparison
Solution retrospective
Often get confused as to what to use when adding spaces between elements - when the spaces are not uniform.
For uniform spaces gap does a great job, but when trying to add non-uniform spaces I get confused as to use padding or margin (especially when adding extra space at the end of page/element).
I often end up using margin, but sometime it messes the layout as the background element does not expand to fit the inner element with large margin.
Any suggestion for this?
Community feedback
- @gfunk77Posted 10 months ago
Your solution looks really good. Congratulations. To help with your questions, refer to the css box model. Here is a link to W3 Schools to get you started - https://www.w3schools.com/css/css_boxmodel.asp
Padding is the area around the content and margin is the space around the element itself. So if you need to create distance between elements, you need margin. If you need to create space between the content and the border of your element, you need padding.
When you use the gap property in flex-box, that is creating a specific distance between all of the flex-box items so that won't help if you need different spacing between elements.
Check out resources for box model. It will really help. I hope this is all helpful.
1
Please log in to post a comment
Log in with GitHub
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