tailwind css 中是否存在 child 如何保持 parent 元素高度不变？

Question

我有以下 html 代码：

<div id="bar" class="p-4 bg-white">
  <div class="flex justify-between">
    <h3 class="text-2xl font-bold text-left text-black">Users</h3>
    <a class="py-2 px-4 text-sm font-extralight rounded shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75 bg-blue-500 text-white hover:bg-blue-700 focus:ring-blue-400" href="/admin/users/new">New user</a>
  </div>
</div>

我发现当我删除“新用户”按钮（“a”标签）时，div#bar element的高度会变小一点。

在我删除右侧的“新用户按钮”（“a”标签）后，div#bar 元素 的高度发生了变化：

我需要 div#bar 元素保持其高度，无论其 child 元素“新用户”按钮是否存在。

因为我想有一个集中的页面布局，所以我的一些页面header包含右键，其他可能不包含右键。

如何避免 child 元素的内边距影响其 parent 实际高度？

Answer 1

您可以在 h3 上添加一些填充，使其与按钮高度相同或更大，这样添加按钮不会增加容器高度。

或者您可以在容器上设置一些最小高度。

Check this Tailwind playground I've made

Answer 2

给它一个父最小高度。

min-h-something

tailwind css 中是否存在 child 如何保持 parent 元素高度不变？

How to keep parent element height not changed whether child exist in tailwind css?

html

css

tailwind-css