CSS visibility:hidden; と display:none; はこんなに違っていた

現在 aquilegia が Postal Search Ajax API を使って、住所のサジェストを実装しています。

その実装の中で visibility:hidden; を使っているのですが、それを見たとき、ふと visibility:hidden; と display:none; は何が違うのだろうと疑問が生じました。

そこで Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification を見てみると、visibility:hidden; と display:none; は明らかに違うものだと知りました。

visibility:hidden; はレイアウトボックスを保持したまま不可視(透明)になり、display:none; はレイアウトボックス自体を生成しないということらしいです。

Firebug の Layout タブで確認してみると、visibility:hidden; は margin や padding、width、height のスタイルを保持していますが、 display:none; はそのスタイルがすべて 0 となっています。

visibility:hidden; と display:none; はこんなに違っていたのですね。わたしの初歩的な理解不足が原因なのでした。

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS) 大藤 幹 by G-Tools