I am totally new to coding and learning everyday. For this challenge, I struggled so hard to remove the line space between the title "Preparation time" and the list (total, preparation, cooking), but couldn't find the solution. Is it because I used "flex-direction: column;"...?
@Chandrakhd
Posted
Hi K, Based on your question yes, I have also notice some gap issues on the couple of places. But it can easily be resolve. From my understanding that the each of the tag comes with the default padding, margin, and box sizing set to content box which will sometime led to the space issue if you keep adding the padding or sizes. setting the margin and padding on the p that will do it. padding: 0; margin: 0; box-sizing: border-box.
Thanks.
Marked as helpful
@lexborron
Posted
Hi K,
The reason there is spacing between 'Preparation Time' and the list below it is because the <p> and <ul> elements have default margin styles that are being applied. You could target either the margin-top on your ul or margin bottom on your p to reduce the space.
As an example, you could add this to remove the space above the list:
ul {
margin-top: 0;
}
Or, you could apply 'box-sizing: border-box' to the root element along with 'margin: 0'. This will give you a 'reset' which will remove the default margins on everything and make all your elements more predictable to work with. Here is a helpful resource on box-sizing.
Also, dev tools in your browser are your friend when you want to see what's going on under the hood. Hope this helps!
You did great :D
Marked as helpful
@lilythelily
Posted
@lexborron Thank you so much for your detailed answer. I will try to “digest” your advice by reading over and over…:) Also, thanks for the url for the article. I am sure it will be of great help for me to understand the box model.
@lexborron
Posted
@lilythelily You're welcome! Let me know if there's anything you're stuck on. I edited what I originally wrote to try to make it more clear.
Marked as helpful
@lilythelily
Posted
@lexborron Thank you very much for taking your valuable time to follow up! I read your answer and the article you mentioned carefully. It helped me a lot to understand how much I misunderstood the concept of “margins.” I realized that I need to acquire new perspective when coding. This obstinate “designer” perspective must be obstructive when one learns to code.
@JS-Law
Posted
Hey K,
I’m not sure what you mean about the line space but I suppose it could be from the <p> that the title was wrapped in.
For your next project, look up how to add variables to :root. It’s game changing and will clean up your css a bit and make it easier to read/add colors and fonts.
Overall though it looks great and you should be proud!
Marked as helpful
@lilythelily
Posted
@JS-Law Thank you for your answer! Yes, I will learn how to add variables. So much to learn… :)
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
