Design comparison
Solution retrospective
What are your opinions on adding margin to elements of a component. For example, lets say you have a card with an image, title (h1...etc), text, and button in a column. '''HTML
<article> <img /> <h1>Title</h1> <p>Text</p> <button>Call to Action</button> </article> '''Would it be a good idea to remove the margin from the h1and paragraph, wrap the elements in a div, and set the margin on the div? '''CSS .card-title h1 { margin: 0; } .card-title{ margin: 1.5rem 0 } ''' '''HTML
<div class="card-title"> <h1>Title</h1> </div> '''Community feedback
- @elaineleungPosted over 2 years ago
Good question, Manuel, I normally use a container if there are several elements that look like they are grouped together, like what you mentioned, and I normally use a padding for the container so that when the screen is small and the container is touching the edge of the screen, the text contents won't be touching the sides. For the margins, I already have a reset on them usually of
margin: 0, so when I'm spacing them out, I would from the top element and see how much space there is to the element below, and then I'd just usemargin-bottomto space it out. Or, if the spacing looks more of less the same, I'd just use the children selector or a gap property if I'm using flex/grid.By the way the site looks great! I think the only suggestion I have just from quickly playing around with it is, you can try making the cursor a pointer on the dropdown nav titles since the title is clickable. Great job!
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