如何在顺风css中是否存在子元素时保持父元素高度不变？答案

【问题标题】：How to keep parent element height not changed whether child exist in tailwind css?如何在顺风css中是否存在子元素时保持父元素高度不变？
【发布时间】：2022-01-16 00:24:53
【问题描述】：

我有以下 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 元素的高度会变小一点。

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

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

因为我想要一个集中的页面布局，我的一些页面标题包含右键，其他可能不包含右键。

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

【问题讨论】：

你试过给父元素添加固定高度吗？

标签： html css tailwind-css

【解决方案1】：

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

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

Check this Tailwind playground I've made

【讨论】：

非常有帮助。非常感谢。

【解决方案2】：

给它一个父级的最小高度。

min-h-something

【讨论】：