Sometimes, we want to remove the space between inline or inline-block elements with CSS.

In this article, we’ll look at how to remove the space between inline or inline-block elements with CSS.

How to remove the space between inline or inline-block elements with CSS?

To remove the space between inline or inline-block elements with CSS, we can use flexbox.

var cid = ‘5046441454’;
var pid = ‘ca-pub-9346223375875688’;
var slotId = ‘div-gpt-ad-thewebdev_info-medrectangle-3-0’;
var ffid = 1;
var alS = 1021 % 1000;

var container = document.getElementById(slotId);
var ins = document.createElement(‘ins’);
ins.id = slotId + ‘-asloaded’;
ins.className = ‘adsbygoogle ezasloaded’;

ins.dataset.adClient = pid;
ins.dataset.adChannel = cid;

ins.style.display = ‘block’;
ins.style.minWidth = container.attributes.ezaw.value + ‘px’;
ins.style.width = ‘100%’;

ins.style.height = container.attributes.ezah.value + ‘px’;

container.style.maxHeight = container.style.minHeight + ‘px’;
container.style.maxWidth = container.style.minWidth + ‘px’;

container.appendChild(ins);

(adsbygoogle = window.adsbygoogle || []).push({});

window.ezoSTPixelAdd(slotId, ‘stat_source_id’, 44);
window.ezoSTPixelAdd(slotId, ‘adsensetype’, 1);

var lo = new MutationObserver(window.ezaslEvent);
lo.observe(document.getElementById(slotId + ‘-asloaded’), { attributes: true });

For instance, we write

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

to add a p element with 2 spans.

Then we style them by writing

p {
  display: flex;
}

span {
  width: 100px;
  font-size: 30px;
  color: white;
  text-align: center;
}

We make the p element a flex container with display: flex.

This will also remove the space between the child elements, which are the spans.

Then we style the span’s text with by changing the font size, color, and alignment.

Conclusion

To remove the space between inline or inline-block elements with CSS, we can use flexbox.