CSS Görünürlük & Görüş - Display & Visibility

CSS ile bir etiketin/elemanın görünmesini engelleyebiliriz ya da gizlenmesini sağlayabiliriz.

CSS Elemenanının Gizlenmesi - display:none yada visibility:hidden

Elemanları gizlemenin iki yolu vardır, display:none veya visibility:hidden .

Bu iki özellik birbirinden farklıdır, visibility:hidden sadece görünmez olmasını sağlar, elemanın özellikleri olduğu gibi durur.

.gizle {
    visibility:hidden;
}

display:none ise elemanı gizler ve elemanı yoksaydığımız için sayfada herhangi bir yer kaplamaz.

.gizle {
    display:none;
}

CSS Görünürlük - Blok ve Inline Elemanı / Display - Block and Inline Elements

Bir etikete/elemana display:block özelliği tanımlarsak etiket alabildiğine genişler ve etiketin hem üst satırına hemde alt sanırına bir <br /> etiketi koymuş gibi görüntü sağlar.

Örnek block elemanlarını görelim:

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

Bir inline element, gerektiği durumda genişlik alır ve etiketin üstüne yada altına <br /> etiketi koymaz.

Örnek inline elemanlarını görelim:

• <span>
• <a>

Değişen bir eleman nasıl görüntülenir - Changing How an Element is Displayed

Bir öğenin display CSS 'ini "inline" veya "block" olarak degiştirerek, Web standartlarının dışına çıkmadan tasarımda için güzel çözümler bulabilirsiniz.

Aşağıda ki örnek, liste elemanlarını "inline" olarak göstermektedir:

li {
    display:inline;
}

Aşağıda ki örnek, span elemanlarını "block" olarak göstermektedir:

span {
    display:block;
}

Not: Bir elemanın görüntülenme tipini değiştirmek sadece onun nasıl göründüğünü değiştirir, elemanın ne olduğunu değil. Örneğin: Bir inline eleman display:block olarak ayarlandıysa içinde bir başka block elemanın konumlanmasına izin vermez.