Confused with gap in flexbox objects
Gap between the red box and the bordered text needs to go, cannot figure out what causes this gap to be there.
16 Replies
What's the HTML like?
The display:flex is put on choice-border
I do have box-sizing:box-border, if that is of any use for the solution
go into the dev tools and click on the square with the arrow, the function that highlights elements when you hover over them in the browser. hover over the elements around the gap and see what is causing it. hope this makes sense :)
Margin and padding is both 0, the gap also shows nothing
Unless my margin and padding from my *, ::after, ::before selector does not apply to this
open all those arrows and hover over each one by one
you should really share your code in an interactive format
codepen is best, otherwise something like codesandbox or anything similar
Do you meanvia codepen, jochem? Yeah I can put it into codepen if that would make it easier for you guys
If you put the
<img/><p><a></a></p> in the same line without any spaces. Try that for one.Did not fix it :(
I will put it into codepen, give me a moment
Would have been surprised if it did. Really old layout bug related to something like this.
Codepen would be easiest
Quick question, which is the link I need to send for the codepen?
It is pretty much my first time using it
https://codepen.io/brightDN/pen/LYXJvGv i guess just the url?
yup, that's it
I'm not sure what's causing this, I'm not that knowledgable about CSS, but setting the images to
display: block; and giving them some content (I used some placeholder images from https://picsum.photos) removes the gap