如何用纯色填充内联块div？

Question

请考虑以下代码。我的目的是在30px和hello之间有一个world宽的绿色条。

.bar {
  display: inline-block;
  background-color: green;
  width: 30px;
}

<div>
  hello <div class="bar"></div> world
</div>

该块确实存在，但没有填充。缺少什么？

Answer 1

div中没有内容，因此高度为0px。您可以设置height或在 中使用div使其显示。