CSS Display özelliği, bir nesneyi görünürken gizlemek yada görünmez durumdayken ortaya çıkarmak (visibility) işlevini görür.

Bir elemanı Gizlemek, display:none veya visibility:hidden

CSS’te eğer bir nesneyi görünmez yapmak istersek bunu css özelliklerinden display:none ya da visibility:hidden ayarları ile yaparız.Aralarındaki fark ise visibility:hidden özelliğini kullanırsak gizlenen elemanın bulunduğu alan boşlukla belirlenirken, display:none özelliğinde ise elemanı görünmez yaptığımızda artık o eleman hiç kullanılmamış gibi olur ve bulunduğu yerde boşluk olmaz.

h1.hidden {visibility:hidden;}

h1.hidden {display:none;}

Bunun yanında bir de kod karmacası vardır.. CSS içerisinde bazen kodların gizlenmesi gerekebilir.. Tarayıcının kodları görmemesini sağlamak için block ve inline özellikleri kullanılır.. Örneğin aşağıda yaptığım örnekte <span> tagini tarayıcının görmemesini sağladık;

span
{
display:block;
}

ya da başka bir örnekle aşağıda li taglarını blockladık bu sayede bir liste gibi görünmedi;

li {display:inline;}

Bunların aralarındaki fark sadece kullanıldıkları tag’lere göredir.

Block elemanını ;

• <h1>
• <p>
• <div>

gibi taglarda kullanabilirken, inline elemanını kullanırken de sadece gerekli olan aralıkları kapsayan ve satır sonlarını zorlamayan tipteki oluşumlarda kullanılır, bunlar;

• <span>
• <a>

gibi etiketlerde kullanılabilir.

Eğer bir elemanı gizlemek istiyorsak bunun nasıl gizlediğimizin bir önemi yoktur fakat kod içerisinde bir gizleme ya dagösterme işlemi yapacaksak bunlar display ya da inline olarak nerede kullanıldığının önemi vardır.