使用 CSS，即使不存在 DIV 元素，我如何才能防止一块空白空间折叠？

Question

I have the following elements: Title, Description, and Image. There should be 20px space above the Title, like this:

As you can see from the picture, there is a block of space above the title. I want the space to remain there, even if the Title and Description are not present. For example like this:

Right now my problem is that, if there is no title and description, then the space is collapsing and the image is moving up and basically occupying that space.

How can I keep the space, even if there is no Title and Description present or not? I thought of applying min-height to the "titleName", but that has not worked.

<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>

Answer 1

If I am able to understand the question correctly, your problem would easily be solved by adding

margin-top: 20px;

to myComponent class

Answer 2

As I understand from your question, when we remove the div, the entire div is removed from DOM element and also the space gets removed.

We can use the Visibility CSS property. When we use visibility:hidden property, the text content from div is hidden from the HTML DOM but not removed from the div tag.

You can also dynamically add a class that contains hidden property. The total space will be equivalent to the combined space of title and description.

I created a demo for reference with & without title and description, have a look here https://jsfiddle.net/alepsh/todenjsr