Kevin Powell - Community•2y ago

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•2y 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()

Gaming

Programming

CSS Margin Collapse