Why is there padding between my divs? (I tried to do a CSS reset)

HTML-CSS
1

I can’t figure out why there is padding between and below my divs. I tried to use the universal selector to remove built-in padding etc. It doesn’t seem like that’s working.

But even if apply no padding/margin specifically to divs, it doesn’t seem to remove them:

https://codepen.io/El_Escandalo/pen/WNQOerQ?editors=1100

2

It’s not padding it’s white space between inline-block elements.

You can remove it physically in the HTML:

<div class="blue-square-container">
  <div class="blue-square"></div><div class="blue-square"></div><div class="blue-square"></div>
</div>

Or you can use comments:

<div class="blue-square-container">
  <div class="blue-square"></div><!--
  --><div class="blue-square"></div><!--
  --><div class="blue-square"></div>
</div>

Or you can set font-size: 0 on the parent container

.blue-square-container {
  text-align: center;
  border: 1px solid #000;
  font-size: 0;
}
1 Like