12 Replies
You need to share your code, preferebly on codepen. we cannot really debug this issue by looking at a screenshot. Maybe you have margin that creates a gap. Or maybe you have a <br> tag in between there. It could be a bunch of reasons. You need to share code so we can see what's going on there
OR i think its due to collapsing margins
you are probably using a heading tags, they have default margins
so you could remove the margin from the headings
You can also solve the issue with
display:flow-root; there is also a padding/border trick you can do to solve the issue. There are many ways to solve itI made a quick example for you to show how you can fix it with display:flow-root;
So you can see before and after here
You put the
display: flow-root on the headings ? (h1,h2,h3, etc) and that gets rid of collapsing margins ?No, you put display:flow-root; on the parent element
And that stops its children’s margins from collapsing ? In the same way display: grid or display: flex will?
Yupp, that is correct. it will prevent the children's margins from collapsing just like grid and flex
You can also do this
So you use padding-block:0.1px;
also works with border-block
Interesting I haven’t used flow root before. I have used the padding-block trick before though in block level elements. Block formatting context still confuses me so much 😆
Yeah, normally you use flow-root as a clearfix for when you use floats, but it also works to prevent collapsing margins so it is kinda useful for this too. But i normally use flexbox/grid anyway so i usually don't need flow-root. But it's good to know that it also works to prevent collapsing margins 🙂
Same I’ve gotten reliant on flex and grid and using gap but still good to know what is available
Yeah 😄