@lexborron
@lilythelily
Submitted
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;"...?
@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