使用 CSS，即使不存在 DIV 元素，我如何才能保持一块空白不塌陷？答案

【问题标题】：Using CSS, how I can keep a block of white space from collapsing , even if there is no DIV element present?使用 CSS，即使不存在 DIV 元素，我如何才能保持一块空白不塌陷？
【发布时间】：2021-03-26 20:31:36
【问题描述】：

我有以下元素：标题、描述和图片。 Title上方应该有20px的空间，像这样：

从图片中可以看出，标题上方有一块空格。我希望空间保留在那里，即使标题和描述不存在。比如这样：

现在我的问题是，如果没有标题和描述，那么空间就会塌陷，图像会向上移动，基本上占据了那个空间。

即使没有标题和描述，我如何才能保留空间？我想将 min-height 应用于 "titleName" ，但没有奏效。

<div class="myComponent">
 <div class="myContainer">
   <div id="head_Title" class="mainTitle">
    <h2 class="titleName"> This is a Title</h2>
   </div>
   <div id="description" class="mainDescription"></div>
 </div>
</div>

【问题讨论】：

您在附近的第一个标签中有一个额外的空间
如果没有标题或描述，那你怎么知道空间的高度应该是多少？当然，这取决于那里的文本。
标题上方应始终留有 20 像素的空间。如果没有标题，则此处应始终在图像上方留出 20 像素的空间。
尝试将margin-top: 20px 添加到您的titleName
CSS 边距或内边距？如果您想快速入门，请尝试

或

。

标签： javascript html jquery css sass

【解决方案1】：

我从您的问题中了解到，当我们删除 div 时，整个 div 将从 DOM 元素中删除，并且空间也被删除。

我们可以使用 Visibility CSS 属性。当我们使用visibility:hidden 属性时，来自 div 的文本内容对 HTML DOM 是隐藏的，但不会从 div 标签中删除。

您还可以动态添加包含隐藏属性的类。总空间将等于标题和描述的组合空间。

我创建了一个带有&没有标题和描述的演示供参考，请看这里https://jsfiddle.net/alepsh/todenjsr

【讨论】：

【解决方案2】：

如果我能正确理解问题，您的问题很容易通过添加解决

margin-top: 20px;

到myComponent类

【讨论】：

不，你没有理解我的问题。如果添加 margin-top: 20px;然后如果有标题，它将获得额外的 20px 空间，这不是我想要的。不管有没有title，我都想要20px在上面。
然后从所有其他小组件中删除 20px 的边距，例如标题。