Css Display

Html standardında her bir etiket başlangıç olarak bir gruba atanmıştır.. Bazı etiketlere inline etiketler bazılarına ise block etiketler denmiştir.

Her hangi bir işlem yapmadan oluşturduğumuz etiketlerin nasıl davranacağını önceden bilmemiz gerekiyor ki gerektiği zaman inline ve block etiketlerin özelliklerini değiştirebilelim.Yani bir etiket inline ancak css display ile bir block etikete ya da tam tersi olarak block bir etiketi de inline etikete çevirebiliriz.

Peki nedir Inline ve Block Etiket ?

Html sayfalarında eklediğimiz her nesne sol üst köşeden başlayarak birbiri ardına gelerek eklenir. Ancak dikkat etmişinizdir ki; bazı nesneler yan yana gelirken (<span>, <a>, <i>) bazı nesnelerde (<div>, <p>, <ul>, <li>) alt alta gelmektedir.

Yan yana gelen bu nesnelere inline etiket, alt alta gelen etiketlere ise block etiketler denir.

** Inline etiketlerden olan <a> ve <span> etiketlerini aşağıdaki gibi oluşturduğumuzda yan yana geldiklerini görürüz. Hatta 2 grup inline etiketin arasına 2 tane <br> etiketi ekleyerek bir alt satırdan devam ettiğimize dikkat ediniz.

<a href="#"> Link 1 </a>
<a href="#"> Link 2 </a>
<a href="#"> Link 3 </a>

<br><br>

<span> etiket 1 </span>
<span> etiket 2 </span>
<span> etiket 3 </span>

Örnek 1 için için tıklayınız.

** Inline etiketlere genişlik ve yükseklik veremeyiz. (width,height).

** Inline etiketlere genişlik ve yükseklik veremediğimizden dolayı background-color sadece yazının arkasını çevreler.

** Inline etiketlere sadece sağ ve soldan margin ya da padding değerleri verebiliriz. Üst, alt margin ve padding özellikleri inline etiketler için işlevsel değildir. Dolayısıyla inline etiketler için kullanabileceğimiz margin ve padding değerleri, margin-left, margin-right, padding-left ve padding-right.

** Block etiketlerden olan <div> etiketlerini aşağıdaki gibi oluşturduğumuzda yan yana geldiklerini görürüz. 

<div> div 1 </div>
<div> div 2 </div>
<div> div 3 </div>

div {
  height:50px;
  background-color:red;
  margin-bottom:5px;
}

Örnek 2 için için tıklayınız.

** Burada her bir div için bir yükseklik verdik ve her bir <div> arasında aşağıdan bir mesafe oluşturmak için ise margin-bottom:5px; dedik.

** <div> etiketleri block etiket olduğundan dolayı bir genişlik vermediğimizde satırı olduğu gibi kaplar ve bir sonraki nesne bir sonraki satırdan devam eder.

** block etiketler için yükseklik ve genişlik değeri verebiliriz. Dolayısıyla aynı satırda bir den fazla block elemanı yan yana getirebilmek için bir genişlik kullanmalıyız.

<div> div 1 </div>
<div> div 2 </div>
<div> div 3 </div>

div {
  height:50px;
  width:200px;
  float:left;
  background-color:red;
  margin-right:5px;
}

Örnek 3 için için tıklayınız.

** Burada her bir div için 200px 'lik bir genişlik kullandık. Eğer tarayıcının genişliği toplamda 200px*3 = 600px değerini geçmezse her bir <div> yan yana gelir ancak satırda yeterli alan yoksa yani 600px' in aşağısına inerse bu durumda her bir nesne yer kalmadığında bir sonraki satırdan devam eder.

<div id="container">
   <div class="box"> div 1 </div>
   <div class="box"> div 2 </div>
   <div class="box"> div 3 </div>
</div>

#container {
  width:500px;
}

.box {
  height:50px;
  width:200px;
  float:left;
  background-color:red;
  margin:5px;
}

Örnek 4 için için tıklayınız.

Peki varsayılan olarak belirlenmiş display özelliğini nasıl değiştirebiliriz ?

Css display özelliği aşağıdaki değerleri alabilir.

display: inline | block | inline-block | none; 

Aşağıdaki örneğimizde block olarak gelen <div> etiketlerini inline etikete çevirelim.

<div id="container">
 <div class="box"> div 1 </div>
 <div class="box"> div 2 </div>
 <div class="box"> div 3 </div>
</div>

#container{
  width:500px;
}
.box {
  display:inline;
  height:50px;
  width:200px;
  background-color:red;
  margin:5px;
}

Örnek 5 için için tıklayınız.

** Burada dikkat etmemiz gereken display:inline ile block etiketi inline etikete çevirmemiz ve bu durumda nesneler için tanımlanan height ve width değerinin etkin olmadığıdır. Çünkü inline etiketler için yükseklik ve genişlik verilemez.

** Ancak float uyguladığımız bir nesne direk block etikete çevirilir.

Dolayısıyla <div> için bir float kullandığımızda <div> etiketlerine inline demiş olmamıza rağmen yükseklik ve genişlik etkin duruma geldi çünkü float uygulanan nesne her zaman block etikete çevrilr.

Örnek 6 için için tıklayınız.

Peki float özelliğini göz ardı edersek; bir nesne inline ise yükseklik ve genişlik veremiyoruz block ise bunları yan yana getiremiyoruz çünkü satırı olduğu gibi kaplıyor.

Eğer ki bir nesneyi display:inline-block yaparsak bu duruma bir çözüm bulmuş oluruz. Yani display:inline-block olan bir nesne hem inline gibi satırda yan yana gelir hem de bu nesnelere block nesneler gibi yükseklik ve genişlik değerleri verebiliriz.

<div id="container">
   <div class="box"> div 1 </div>
   <div class="box"> div 2 </div>
   <div class="box"> div 3 </div>
</div>

#container{
  width:500px;
}

.box {
  display:inline-block;
  height:50px;
  width:200px;
  background-color:red;
  margin:5px;
}

Örnek 7 için için tıklayınız.

Son olarak bir nesneyi görünmez hale getirebilmek için display:none; kullanmalıyız. 

<div id="container">
  <div class="box"> div 1 </div>
  <div class="box"> div 2 </div>
  <div class="box invisible"> div 3 </div> 
</div>

.invisible{
  display:none;
}

** display:none; özelliğini bir class içine alalım ve bu class değerini verdiğimiz her nesne görünmez hale gelir.