CSS'de bir element veya kutu (box) gibi bileşenlerin görünüm modeli değiştirilebilir. Ana hatlarıyla CSS'de aşağıdaki görünüm modelleri bulunmaktadır :
- inline (satıriçi) : element'in var olan satırda solda sağa şeklinde yerleştirilmeye devam edileceği (üste veya alta yeni satır olmaması). Örneğin HTML'de a, img vs.. inline elementlerdir. Kullanımı : inline , inline-block
- block (blok) : element'in önünde ve sonunda yeni satır yapılması şekilde yerleştirilmesi. Örneğin HTML'de p , h1, div elementleri blok eklementleridir. Kullanımı : block , inline-block
- list-item : Bir element bir listenin item'ı (maddesi) gibi gösterilmesi için kullanılmaktadır. Üste ve altta yeni satır yapılır ancak tek başına kullanılmaz. HTML'de LI elementi list-item elementtir. Kullanımı : list-item
- Tablo ile İlgili Modeller : Buradaki modeller bir tablo için gerekli modellerdir. Kullanımı : table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption
Bir elementin veya kutunun modeli aşağıdaki gibi set edilmektedir :
p {display: inline}
inline yerine diğer modelerin adı yazılmaktadır.
Eğer bir element veya kutunun hiç gözükmemesi isteniyor ise none ifadesi kullanılır :
p {display: none}
