[解決済み] divは隠すが、空白は残す

質問

以下のようなdiv要素を持っています。

.description {
  color: #b4afaf;
  font-size: 10px;
  font-weight: normal;
}

<div class="description">Some text here</div>

そして、ある要素のクリック機能で上のdivを非表示にしています。

$('#target').click(function(){
  $(".description").hide();
});

divを非表示にすると、divは折りたたまれ、スペースを取らなくなります。これは、私のページのレイアウトを混乱させる。

divを非表示にしても、以前取っていたスペースを維持する方法はありますか？フォントカラーはまだ選択可能なので、変更したくありません。

どのように解決するのですか？

使用方法 視認性 というcssプロパティを使ってください。

visibilityを指定します。

visibilityプロパティは、ある要素によって生成されたボックスがレンダリングされるかどうかを指定します。 がレンダリングされるかどうかを指定します。

$(".description").css('visibility', 'hidden');

デモ フィドル