JSFiddle - React, Tailwind, and code Playground

by silviagreen

HTML

<p>Works fine:</p>

<div class="wrapper">
  <div class="content">not empty</div>
</div>

<p>Not so much:</p>

<div class="wrapper2">
  <div class="content"></div>
</div>

CSS

.wrapper {
  background-color: red;
  margin-bottom: 20px;
 /* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}

.content {
  display: inline-block;
  height: 20px;
  width: 200px;
  background-color: green;
  /* vertical-align: top; *//* this would fix it, but why? */
}

.wrapper2 {
  background-color: red;
  margin-bottom: 20px;
  font-size:0;
 /* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}