Демонстрация элементов inline-block с пробелом

by webref

HTML

<header>
  <code>&#60;header&#62;</code>
</header>

<section>
  <code>&#60;section&#62; <br> display: <br> inline-block;</code>
</section>
  
<section>
  <code>&#60;section&#62; <br> display: <br> inline-block;</code>
</section>
    
 <section>
  <code>&#60;section&#62; <br> display: <br> inline-block;</code>
</section>

<footer>
  <code>&#60;footer&#62;</code>
</footer>

CSS

code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}
header,
section,
aside,
footer {
  margin: 0 1.5% 24px 1.5%;
}
section {
  display: inline-block;
  width: 30%;
}
footer {
  margin-bottom: 0;
}