Bu yazımda CSS’te en çok karıştırılan display türleri hakkında konuşacağım.

inline

inline adı üzerinde hizada (yan yana) demektir. Yani inline olan arka arkaya tüm elementler yan yana dizilirler. Mesela

<span>lorem</span> <span>ipsum</span> dolor sit <span>amet</span>

bir de span’leri görebilmek için border veriyorum:

span {
    border: 1px solid #000;
    width: 70px;
    height: 70px;
}

Not: span elemanı default olarak inline‘dır.

burada alacağımız görüntü şu şekilde;

inline hizada demek olduğu için elemanların genişlik(width) ve yükseklikleri(height) olamaz. Genişlik ve yükseklikleri olursa, elemanlar hizalanamazlar. Yani örneğimizde kullandığımız width ve height bu yüzden çalışmıyor.

inline-block

Elemanlarımızı yan yana istiyoruz ancak bunlara yükseklik ve genişlikte vermek istiyoruz. İşte burada  inline-block devreye giriyor. Şimdi az önceki örnekteki spanlerimizi inline-block yapıyorum.

span {
    border: 1px solid #000;
    width: 70px;
    height: 70px;
    display: inline-block;
}

ve çıktımız şu şekilde oluyor:

table-cell

inline-block arasındaki temel farkı table-cell table tagindeki <td> gibi davranır. Yani sağındaki ve solundaki eleman ile aynı yüksekliğe sahip olur. Mesela 2 kolonlu bir site tasarlıyalım. İlk olarak inline-block kullanıyorum.

HTML:

<div class="sol">
    Lorem Ipsum sit amet
</div>
<div class="sag">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam odio, laoreet eu eleifend sed, porttitor nec tortor. Etiam dignissim sodales tempor. Aliquam ut dictum nibh. Praesent tristique tempor mi at dignissim. Phasellus commodo mauris leo, et lobortis risus. Donec vehicula vulputate risus at convallis. Ut ut elit vitae mauris sagittis blandit non nec risus. Morbi neque urna, pretium eget posuere eget, pharetra vel risus. Cras euismod laoreet fermentum. Nulla non dui ipsum, in malesuada enim. Duis blandit turpis arcu.
</div>

CSS:

div {
    border: 1px solid #000;
}
.sag {
    display: inline-block;
    width: 250px;
}
.sol {
    display: inline-block;
    width: 100px;
}

ve oluşan görüntü:

Noldu? Olmadı. Şimdi 2 kolonuda aynı yükseklikte yapmak için 2 seçeneğiniz var:

1. javascript, html, css ile türlü taklalar atıp bunları aynı yüksekliğe getirmek.
2. display: table-cell kullanmak.

CSS’imizi değiştiriyorum.

div { 
    border: 1px solid #000; 
} 
.sag { 
    display: table-cell; 
    width: 250px; 
} 
.sol { 
    display: table-cell; width: 100px; 
}

Şimdi oldu gibi. Ancak table-cell‘in bir sorunu var. table-cell, td gibi davrandığı için margin’i olamaz. Çözüm: border-spacing kullanmak. border-spacing’i sadece display: table elemanına verebiliyoruz. Şimdi bu sag ve sol elemanlarını bir container içine alıyorum.

<div class="container">
    <div class="sol">
        Lorem Ipsum sit amet
    </div>
    <div class="sag">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam odio, laoreet eu eleifend sed, porttitor nec tortor. Etiam dignissim sodales tempor. Aliquam ut dictum nibh. Praesent tristique tempor mi at dignissim. Phasellus commodo mauris leo, et lobortis risus. Donec vehicula vulputate risus at convallis. Ut ut elit vitae mauris sagittis blandit non nec risus. Morbi neque urna, pretium eget posuere eget, pharetra vel risus. Cras euismod laoreet fermentum. Nulla non dui ipsum, in malesuada enim. Duis blandit turpis arcu.
    </div>
</div>

Şöylede bir stayla veriyorum:

div {
    border: 1px solid #000;
}
.sag {
    display: table-cell;
    width: 250px;
}
.sol {
    display: table-cell;
    width: 100px;
}
.container {
    display: table;
    border-spacing: 10px;
    border: 0;
}

ve çıktımız şu şekilde:

block

block elemanı bulunduğu taşıyıcının tüm genişliğini kaplar ve sağına soluna eleman kabul etmez. 

Örnek

HTML

<div>
        Lorem Ipsum sit amet
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam odio, laoreet eu eleifend sed, porttitor nec tortor. Etiam dignissim sodales tempor. Aliquam ut dictum nibh. Praesent tristique tempor mi at dignissim. Phasellus commodo mauris leo, et lobortis risus. Donec vehicula vulputate risus at convallis. Ut ut elit vitae mauris sagittis blandit non nec risus. Morbi neque urna, pretium eget posuere eget, pharetra vel risus. Cras euismod laoreet fermentum. Nulla non dui ipsum, in malesuada enim. Duis blandit turpis arcu.
    </div>

CSS

div {
    border: 1px solid #000;
    width: 250px;
}

Not: <div> tagi default olarak block‘tur.

Eğerki width vermeseydik tüm sayfayı kaplayacaktı.

Çıktımız:

float hakkında bir kaç sözüm var

Şimdi bir çok kişi yan yana elemanları dizmek için display: block kullanıyor ve altındaki eleman yanına gelsin diye float: right kullanıyor. Buna hile denir, fitne denir, fesat denir. Bu kötü bir kullanımdır. İleride sorun çıkarır, sürekli clearfix kullanmak gerektirir. Eğerki elemanları yan yana dizmek istiyorsanız yukarıdaki displaylerden birini tercih edin. Ha bir de bu arkadaşın position elemanları kullanarak elemanları yan yana dizmeye çalışanı var ki.. ulan ben… neyse birşey demeyeceğim. Umarım faydalı olmuştur. Kolay gelsin hayırlı işler…