高さを保ったまま要素を消してみよう

問題

高さを保ったまま要素を消してみましょう!
画像を参考に実装してみましょう。

自分の環境に書くコード

              <p>テスト1テスト1テスト1</p>
<p>テスト2テスト2テスト2</p>
<p>テスト3テスト3テスト3</p>
¥HTML¥

              p {
    margin-bottom: 16px;
}
¥CSS¥

期待する画面

解答ソースコード

              <p>テスト1テスト1テスト1</p>
<p>テスト2テスト2テスト2</p>
<p>テスト3テスト3テスト3</p>
¥HTML¥

              p {
  margin-bottom: 16px;
}
p:nth-child(2) {
  visibility: hidden;
}
¥CSS¥

解説

要素の高さを保ったまま消す方法はvisibility: hidden;を使います。

アニメーションで展開するときなどで結構使われますので覚えておきましょう。

ログインして解答を見る

要素を消す方法は他にもopacity: 0;を使って透過させるなどいくつか方法がありますが、visibility: hidden;は完全に消してくれる点が非常に便利です。
opacityの場合、あくまでも透過しただけなので、要素自体はその場に残った状態になります。

visibilityプロパティには、デフォルト値のvisible(可視)、hidden(不可視)、collapse(不可視)があります。
※hiddenとcollapseの違いについては細かいので省きます。気になる場合は調べてみて下さい。