Trying to get rid of whitespace

Trying to get rid of whitesapce beween two divs
No description
12 Replies
Tok124 (CSS Nerd)
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
h1, h2, h3, h4, h5, h6 {
margin:0;
}
h1, h2, h3, h4, h5, h6 {
margin:0;
}
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 it
Tok124 (CSS Nerd)
I 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
No description
No description
clevermissfox
clevermissfox3w ago
You put the display: flow-root on the headings ? (h1,h2,h3, etc) and that gets rid of collapsing margins ?
Tok124 (CSS Nerd)
No, you put display:flow-root; on the parent element
clevermissfox
clevermissfox3w ago
And that stops its children’s margins from collapsing ? In the same way display: grid or display: flex will?
Tok124 (CSS Nerd)
Yupp, that is correct. it will prevent the children's margins from collapsing just like grid and flex
Tok124 (CSS Nerd)
You can also do this
No description
Tok124 (CSS Nerd)
So you use padding-block:0.1px; also works with border-block
clevermissfox
clevermissfox3w ago
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 😆
Tok124 (CSS Nerd)
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 🙂
clevermissfox
clevermissfox3w ago
Same I’ve gotten reliant on flex and grid and using gap but still good to know what is available
Tok124 (CSS Nerd)
Yeah 😄
Want results from more Discord servers?
Add your server