What challenges did you encounter, and how did you overcome them?
I tried writing the text as "span" elements but I learned that spans are inlined and can't do margins so the spacing was weird. Now I know to use the p tag instead if I want to define margins.
@DylandeBruijn
Posted
Hi @Yahia-kilany,
I understand that feeling! It's fine to change the display value of an element though if it fits your need. It's good that you were experimenting with different things, it helps a lot on your journey. Did you find my comment helpful? If you did could you mark it as helpful when you get the chance? This would help me out greatly!
Marked as helpful
@DylandeBruijn
Posted
Hi @Yahia-kilany,
Your solution looks great and close to the design, congratulations!
You are correct that a span is an inline element. Most of the time they are used to style a piece of text in a heading or paragraph in a certain way. However you can always change the display property of a span to something like display: block if you like. This way you can add margins to a span. Keep semantic meaning in mind though, it's better to use a p tag for a paragraph of text than a span for example.
Where did you want to use span exactly?
Marked as helpful
@Yahia-kilany
Posted
@DylandeBruijn I tried to use it for the "learning" tag and the title... I just saw the tag at w3schools and read that it was used for styling texts and I just wanted to try it out to be more familiar with it. Idk how I didn't read that it was an inline element and not a block element and I kinda had a minor mental breakdown when it didn't work (lol) but now I know better
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
