display:noneとvisibility:hiddenの違いを確認しよう

基準となるソース

基準となるソース。すべての要素を表示しています。

  • 1.RED
  • 2.GREEN
  • 3.BLUE
  • 4.YELLOW

display:noneを使用

display:noneを使用しているソース。3.BLUEにdisplay:noneを使用して非表示にしています。
非表示になった分、隣の4.YELLOWが詰まってきました。

  • 1.RED
  • 2.GREEN
  • 3.BLUE
  • 4.YELLOW

visibility:hiddenを使用

visibility:hiddenを使用しているソース。3.BLUEにvisibility:hiddenを使用して非表示にしています。
非表示になっても、隣の4.YELLOWは同じ位置のままです。

  • 1.RED
  • 2.GREEN
  • 4.YELLOW