CSS’de display özelliği, bir HTML elemanının görüntülenme davranışını belirler. Bu özellik, elemanın bir blok, satır, satır içi veya gizli olarak görüntülenmesini kontrol eder.
Display özelliğinin bazı değerleri:
block: Bir elemanı blok düzende görüntüler. Blok elemanlar, kendilerinden önce ve sonra bir satırsonu eklerler ve genellikle kendilerine ayrı bir çizgi genişliği oluştururlar. div, p, h1-h6, ul, ol, li, header, footer, section, nav gibi elemanlar varsayılan olarak block özelliği ile gelmektedir.
span.box {
display:block;
}Yukarıdaki örnekte box clasına sahip span etiketimizin display özelliğini block haline getirdik.
inline: Bir elemanı satır içi düzende görüntüler. Satır içi elemanlar, kendilerinden sonra bir satırsonu eklemeyen ve yan yana diğer satır içi elemanlarla sığdığı kadar genişlik alan elemanlardır. span bir satır içi yani inline elemandır
div.box {
display:inline;
}Yukarıdaki örnekte box clasına sahip div etiketimizin display özelliğini inline haline getirdik.
inline-block: Bir elementin, inline gibi davranırken, aynı zamanda blok düzeyinde özelliklerine sahip olmasını sağlar. Bu, öğelerin satır içi düzende olmasını ve yine de boyut, kenar boşlukları ve diğer blok özelliklerini almasını sağlar.
div.box {
display:inline-block;
}Yukarıdaki örnekte box clasına sahip div etiketimizin display özelliğini inline-block haline getirdik.
none: Bir elementin hiçbir şekilde görüntülenmemesini sağlar. Bu özellik, elementi sayfadan gizler.
div.box {
display:none;
}Yukarıdaki örnekte box clasına sahip div etiketimizin display özelliğini none haline getirdik. box clasına sahip div öğeleri sayfadan gizlenecektir.
flex: Bir containerin içindeki elementlerin birbirlerine göre nasıl davranacağını belirler. Flexbox düzenini tanımlamak için kullanılır. Bu, içeriğinizi düzenlemenize, hizalamanıza ve aralarındaki boşlukları ayarlamanıza olanak tanır.
div.box {
display:flex;
}Yukarıdaki örnekte box clasına sahip div etiketimizin display özelliğini flex haline getirdik.
grid: Bir containerin içindeki elementleri bir ızgara üzerinde düzenlemek için kullanılır. Grid düzenini tanımlamak için kullanılır. Bu, daha karmaşık düzenler oluşturmanıza olanak tanır.
div.box {
display:grid;
}Yukarıdaki örnekte box clasına sahip div etiketimizin display özelliğini grid haline getirdik.
Yukarıda display özelliğinin en çok kullanılan değerlerini listeledik. Ancak CSS'de kullanılabilen daha fazla değer ve detay bulunmaktadır. Bu değerler, HTML elementlerini düzenlemek ve sayfada düzen oluşturmak için oldukça güçlü araçlar sağlar.
HTML'de Details ve Summary etiketleri.