Trying to get rid of whitespace
Trying to get rid of whitesapce beween two divs
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 😄