CSS Margin Collapse

<div1 />
<div id="some-id"></div>
<div2 />
<div1 />
<div id="some-id"></div>
<div2 />
There's some third party script which targets some-id to render their component, but there are cases where it can be empty. <div1 /> and <div2 /> has a marginBottom and marginTop of 32px . When <div id="some-id"></div> wasn't there, the margin was collapsing, but with the introduction of div now I'm getting 64px margin even tho the some-id div is empty and there's no margin collapse. So, how can I remove the div tag if the script tag doesn't appends anything on the UI?
1 Reply
MarkBoots
MarkBoots3y ago
you can set display none when the div is empty
#some-id:empty{
display: none;
}
#some-id:empty{
display: none;
}
or with js after the third party script has rendered
const el = document.querySelector("#some-id");
if(!el.childNodes) el.remove()
const el = document.querySelector("#some-id");
if(!el.childNodes) el.remove()
Want results from more Discord servers?
Add your server