Design comparison
Solution retrospective
I want to why the flexbox has made a gap between the image and the content below. the image gap wasn't able to remove.
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <div class="main"> with the main tag and remove dir="ltr from the html tag to fix the accessibility issue. Give the <title> element a content to fix the error-issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am Helpful. Happy coding
Marked as helpful0 - @aepostenPosted almost 2 years ago
The gap below your image is because your image is rendered as an inline element by default. If you change the display property to remedy this. This article on Geeks for Geeks does a great job of explaining why this happens: https://www.geeksforgeeks.org/how-to-get-rid-of-the-gap-under-the-image/
Marked as helpful0@Fathima-NuhaPosted almost 2 years ago@aeposten Thank You so much! This was really helpful
0
Please log in to post a comment
Log in with GitHubJoin 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