Inline Block Layout

Setting parent front size to 0. Display inline-block takes whitespace into account without it

by LyndseyB

HTML

<div>
  <span> One </span>
  <span> Two </span>
  <span> Three </span>
  <span> Four </span>
</div>

CSS

*, *:after, *:before {
  box-sizing: border-box;  
}

body {
  font-size: 16px;  
}

div {
  background-color: grey;
  padding: 1rem;
  width: 500px;
  font-size: 0;
}

span {
  display: inline-block;
  width: 25%;
  background-color: yellow;
  text-align: center;
  font-size: 1rem;
}