Kutu Modeli Özelliği

Kenarlık(border), içerik alanı ve padding etrafındaki bir veya daha fazla çizgiye denir.

  • boder-style
  • border-top-style, border-right-style, border-bottom-style, border-left-style
  • border-width
  • border-top-width, border-right-width, border-bottom-width, border-left-width
  • border-color
  • border-top-color, border-right-color, border-bottom-color, border-left-color
  • border

Sırasıyla incelersek:

border-style

Yapısı : border-style:
Aldığı Değerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Başlnagıç değeri:tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-style özelliği kenarlık stilini belirlememizi sağlar.(Örn: dotted(noktalı), double(çift) vd.) 10 farklı değeri CSS desteklemektedir. Bu özellik kenarlığın görünmesi için tanımlanması gereklidir. Bir veya dört değer alabilir eğer dört değer alırsa sırasıyla üst, sağ, alt ve sol kenarlık stilini belirler. Eğer tek değeri varsa tüm kenarlık değeri ataması yapılmış demektir. Eğer iki veya üç değer ataması yapılmış ise margin’de gördüğümüz sıralama söz konusudur.

p.yeni { 
    border-style: solid; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border-top-style, border-right-style, border-bottom-style, border-left-style

Yapısı : border-[top,left,right,bottom]-style:
Aldığı Değerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Başlangıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

h1{ 
    border-style: solid; 
    border-left-style: none; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border-width

Yapısı : border-width: <deger\>
**Aldığı Değerler :** [ thin | medium | thick | <uzunluk değeri> ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

İlk olarak stili belirledikten sonra kenarlık kalınlığını belirlemek için border-width değeri kullanılır.

border-width yüzde değeri alamaz.

p {
    margin: 5px; 
    background-color: silver; 
    border-style: solid;
    border-width: 1px; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border-top-width, border-right-width, border-bottom-width, border-left-width

Yapısı : border-[top,left,right,bottom]-width: <deger\>
**Aldığı Değerler :** thin | medium | thick | <uzunluk değeri > | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

h2 { 
    border-left-width: medium;
    border-style: solid; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border-color

Yapısı : border-color: <deger\>
**Aldığı Değerler :** [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-color özelliği kenarlık rengini belirler. (X)html’deki bordercolor ile benzerdir.

p { 
    border-style: solid; 
    border-color: gray;
}

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda yapılabilir.

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border-top-color, border-right-color, border-bottom-color, border-left-color

Yapısı : border-[top,left,right,bottom]-color: <deger\>
**Aldığı Değerler :** [ <renk> | transparent ]{1,4} | inherit
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

border-colorözelliğinin her kenara ayrı ayrı atamasını yapabilmek için kullanılır.

Not: Bir kenarlığı yok etmek için kalınlık değeri veririz. Birde CSS2 ile birlikte gelen transparent özelliği vardır ki bu kenarlığı yok etmez sadece görünmez yapar.

p { 
    border-style: solid; 
    border-color: gray;
}

Tek değer tüm kenarlık renklerini belirler, her kenar için ayrı renk tanımlamasıda yapılabilir.

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

border

Yapısı : border: <deger>
Aldığı Değerler : <border-width\>| <border-style\>| <renk>
Başlnagıç değeri: tanımlama yok
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

borderyukarıda sıraladığımız özellikleri tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.

h1 { 
    border: thick silver solid; 
}

Bu özellikleri tek tek atamak isteseydik şöyle bir kod yazmamız gerekecekti.

h1 { 
    border-top: thick silver solid;
    border-bottom: thick silver solid; 
    border-right: thick silver solid;
    border-left: thick silver solid; 
}

 

 

Margin özelliği elementin etrafındaki boşluk olarak tanımlanır. Negatifdeğer alabilir. Tek tek özellikler(margin-top,margin-left vd.) atanabildiğigibi tek bir özellikle(margin) de tanımlama yapılabilir. Margin özelliklerinianlamak için lütfen Box modellerine bir göz atın.

Kutu Modeli

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • margin

margin-top

Yapısı : margin-top: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-top özelliği elementin üst kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

body { 
    margin-top: 0 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

margin-right

Yapısı : margin-right: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-right özelliği elementin sağ kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p.diger { 
    margin-right: 50% 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

margin-bottom

Yapısı : margin-bottom: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-bottom özelliği elementin alt kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p { 
    margin-bottom: 10px 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

margin-left

Yapısı : margin-left: <deger>
Aldığı Değerler : | <yüzde>| auto
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin-left özelliği elementin sol kenar boşluğunu bellibir değer kadar veya yüzde olarak belirler.Negatif değer alabilir.

p { 
    margin-left: 10px 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

margin

Yapısı : margin: <deger>
Aldığı Değerler : [ | |auto]{1,4}
Başlnagıç değeri: Tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

margin özelliği yukardaki özelliklerin tek bir özellikle uygulanması içinkullanılır.

h1 { 
    margin: 0.25in; 
    background-color: silver; 
}

h1 { 
    margin: 10px 20px 15px 5px; 
}

yukarıda h1 için margin değerleri sıralaması şöyledir:

margin: üst sağ alt sol(saat yönünde)

ikili ve üçlü kullanımda mevcuttur

h1 {
    margin: 0.25em 0 0.5em;
} /* esittir '0.25em 0 0.5em 0' */

h2 {
    margin: 0.15em 0.2em;
} /* esittir '0.15em 0.2em 0.15em 0.2em' */

p {
    margin: 0.5em 10px;
} /* esittir '0.5em 10px 0.5em 10px' */

p.close {
    margin: 0.1em;
} /* esittir '0.1em 0.1em 0.1em 0.1em' */

Padding içerik alanı ile kenarlık arasındaki alandır.

Kutu Modeli

padding-top

Yapısı : padding-top: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

padding-top özelliği içerik alanı ile üst kenarlık arasındakimesafeyi belirler.

h2 { 
    padding-left: 0.25in; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

padding-right

Yapısı : padding-right: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlangıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

padding-right özelliği içerik alanı ile sağ kenarlık arasındakimesafeyi belirler.

h2 { 
    padding-right: 0.25in; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

padding-bottom

Yapısı : padding-bottom: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

padding-bottom özelliği içerik alanı ile alt kenarlık arasındakimesafeyi belirler.

h2 {
    padding-bottom: 0.25in; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

padding-left

Yapısı : padding-left: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

padding-left özelliği içerik alanı ile sol kenarlık arasındakimesafeyi belirler.

h2 { 
    padding-left: 0.25in; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

padding

Yapısı : padding: <deger>
Aldığı Değerler : | <yüzde>| inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

paddingözelliği padding-top, padding-right, padding-bottomve padding-left değerlerini kısayoldan atamak için kullanılır.

h1 { 
    padding: 10px; 
    background-color: silver; 
}

margin’deki gibi farklı kullanım şekilleri mevcuttur.

Kutu modeli özelliklerine devam ediyoruz. Sırasıyla aşağıdaki özellikleri inceleyeceğiz:

  • Width
  • Height
  • Float
  • Clear

Kutu Modeli

width

Yapısı : width: <deger>
Aldığı Değerler : | <yüzde>| auto | inherit
Başlnagıç değeri: auto
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir genişlik(width) değeri alır. Elementlerin başlangıçtaki genişlik değeri auto yani kendi asıl genişliğidir. (Örneğin bir resmin genişliği gibi) Yüzde değeri ebveyn elementi kıstas alarak uygulanır. Negatif değeri almaz.

p { 
    width: 200px; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

height

Yapısı : height: <deger>
Aldığı Değerler : | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: Block-level ve replaced elementler
Kalıtsallık: Yok

Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir yükseklik(height) değeri alır. Elementlerin başlangıçtaki yükseklik değeri auto yani kendi asıl yüksekliğidir. (Örneğin bir resmin yüksekliği gibi) Negatif değeri almaz.

h2 { 
    height: 0.25in; 
}

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

float

Yapısı : float: <deger>
Aldığı Değerler : left | right | none |inherit
Başlnagıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

float özelliği bir elementi(img, table, div vd.) konumuNu belirlemek(sağa veya sola ) için kullanılır. Siz bir elementeflaot=left değeri verirseniz diğer elementler o elementin sağından akar. Bu HTML3,2 deki resime(img) uygulananalign=”left” ve align=”right” ile özdeş bir özelliktir. Ancak CSS 1 tüm elementlere float özelliği vermemizi sağlıyor. HTML 3,2 sadece img ve table için bu özelliği kullanmamıza izin veriyordu. float özelliği sonraki derslerde daha ayrıntılı gösterilecektir. float özelliği CSS ile tablosuz web sitesi oluşturma metodunun en önemli öğelerinden biridir.

p img { 
    float: left;
    margin: 25px; 
}


Bu aralar CSS kitabına(e-kitap) ağırlık verdim. Kitaptaki eksik bölümleri tamamlıyorum. İnşallah en yakın zamanda bitecek. Bu konuda onlardan biri.

Kutu elementlerin görünümüne çeşitli etkiler yapan özellikleri göreceğiz bu makalede çoğu CSS2 ile birlikte gelen bu özellikler aşağıda sıralanmıştır.

  • overflow – taşma
  • clip – kırpma
  • visibility – görünürlük

Overflow

Yapısı: overflow: <deger>
Aldığı Değerler: visible | hidden | scroll | auto | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalıtsallık: Yok

Türkçeye taşmak(overflow) olarak çevirdiğimiz bu özellik sınırlarını belirlediğimiz kutu elementinin içeriğinin sınırları aşması durumunda nasıl davranacağını bildiren bir özelliktir. Özelliğe atanan değerleri tek tek incelersek.

  • inherit – kalıtsallık üst elementin değerini alabilir
  • visible – kutu sınırları dışına taşan alanları göster
  • hidden – kutu sınırları dışına taşan alanları gizle.
  • scroll – kutu sınırlarını taşan kısmı kaydırma çubuğu ile ulaşmamızı sağlar.
  • auto – kutu sınırlarını aşması durumunda scroll ile aynı etkiyi yapar.

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

overflow:visible Overflow’ın başlangıç değeri visible’dır. Bu değer taşma olan kısımların gösterilmesini sağlar.

div#solMenu {
    position: absolute;
    top: 0;
    left: 0; 
    width: 200px;
    height: 120px;
    background: #BBB;
    overflow: visible;
}

overflow

Kodun yeni nesil tarayıcılardaki görünümü

overflow özelliğinin değeri visible olduğu için içerik taşmasına rağmen taşan bölümler gösterilmiştir.

overflow:scroll Eğer içeriğin taşmasını engellemek istiyorsak ama yinede taşan kısımlara ulaşılması için kaydırma çubuğu çıkması için scroll özelliği ekleriz.

div#solMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 120px;
    background: #BBB;
    overflow: scroll;
}

overflow scroll

overflow:scrool olma durumu

overflow:hidden Eğer overflow:hidden değeri atarsak. Sınırladığımız kutunun dışına taşan kısımlar gösterilmeyecektir.

div#solMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 120px;
    background: #BBB;
    overflow: hidden;
}

kodu bu şekilde değiştirdiğimizde görüntü aşağıdaki gibi olacaktır.

overflow:hidden

overflow:auto Son olarakta otomatik değeri vardır. Bu değeri atayınca kutu içeriğine göre otomatik işlem yapacaktır. Eğer taşma olmuyorsa kaydırma çubuğu çıkmayacaktır. Ama eğer içerik taşıyorsa kaydırma çubuğu çıkacaktır.

div#solMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 120px;
    background: #BBB;
    overflow: hidden;
}

overflow:auto

Dikkat ederseniz scroll’dan farklı olarak sadece dikey kaydırma çubuğu çıkmıştır. Yatayda bir taşma olmadığı için yatay kaydırma çubuğu çıkmamıştır.

Örneği görüntülemek için tıklayınız.

Safari’nin eski sürümlerinde sorun çıkarıyor Javascript ile bir çözüm var. http://blog.deconcept.com/2005/03/25/safari-and-links-to-elements-in-overflow-auto-content

Operadaki sorun için ise sadece min-height ve min-width özelliklerini kullanmak yeterli.http://nontroppo.org/test/Op7/overflowbug.html

Bunların dışında Internet Explorer’ün tescillediği ve CSS3 standartlarında yer alan iki adet özellik daha vardır. overflow-x ve overflow-y

overflow-x ve overflow-y: Internet Explorer5x ve üzeri sürümlerden itibaren desteklediği bu özellikler aslında overflow gibi çalışır. Buradaki x ve y’dende anlaşıldığı gibi overflow özelliğini yatay ve dikey olarak ikiye ayıran özelliklerdir. overflow-x özelliği yatayda taşma olması durumunda taşan kısımlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamızı sağlar. overflow-y’de dikeyde aynı şeyi yapar. Firefox’unda 1.1 versiyonundan itibaren bu özellikleri desteklemesi kullanılabilirliğini arttırmıştır. Tabi biraz daha beklemekte yarar var.

Örnekler için tıklayınız. (brunildo.org’dan)

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

clip

Yapısı : clip: rect(<üst>,<sağ>,<alt>,<sol>)
Aldığı Değerler : rect(top, right, bottom, left) | auto | inherit
Başlangıç değeri: auto
Uygulanabilen elementler: mutlak konumlandır uygulanmış elementler (CSS2’den itibaren blok-level elementler ve replacement elementlere )
Kalıtsallık: Yok

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

Not W3C standartları belirlerken konumlandırmalar arasında virgül konmasını öneriyor. Ancak garip bir şekilde IE virgül kullanılan örnekleri normal modda farklı yorumlamaktadır. Acayip modda ise doğru yorumlamaktadır. Ne yapalım bizde tüm tarayıcılara uygun olması için virgül kullanamayacağız

clip, elementin içeriğinin belli bir bölümünün gösterilmesi sağlar. Başlangıç değerinin auto atanmış olması herhangi bir kırpmanın olmayacağını gösterir.

Resim düzenleme araçlarında yaptığımız kırpma işini CSS yardımıyla yapmamızı sağlayan bu özelliği Javascript ile birlikte kullanarak çok güzel uygulamalar yapabiliriz.

Clip’e atanan değerler em cinsinden verilerek esnek sonuçlar elde edilebilir. Ayrıca negatif değerlerde alabilir. Negatif değer atandığında element kutusunun dışına doğru kırpma yapacaktır.

kırpma

Bir örnek yapalım.

CSS kodu:

.kirpma{
    position:absolute;
    clip:rect(50px 130px 153px 40px);
}

HTML kodu:

<div class="kirpma">
<img src="recepemice.jpg" alt="ahmet emice" />
</div>

Kırpma

örneğin görüntüsü

Örneği görmek için tıklayınız.

visibility

Yapısı : visibility:
Aldığı Değerler : visible | hidden | collapse | inherit
Başlnagıç değeri: visible
Uygulanabilen elementler: tüm elementlere
Kalıtsallık: Yok

Tarayıcı Uyumu 
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser

Görünürlük(visibility) özelliği nesnelerin görünümünü belirler. Değeri visible ise element görünür. Eğer değeri hidden ise element görünmezdir. Eğer bir elementin görünürlük değeri hidden olarak atanmış ise element sayfa yapısındaki yeri korur ancak gözle görülmez.

<html>
<head>
<title>visibility Örneği</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
  <li class="alternatifard">body {font-family: sans-serif; font-weight: bold; font-size: 14px}</li>
</style>
  <li class="alternatifard"></head>
<body>
<h1 style="visibility: visible">Görünür Başlık</h1>
<h1 style="visibility: hidden; background-color:#f00; border:1px solid #000; margin:20px 0; padding-top:10px;">Görünmez Başlık</h1>
<h1 style="visibility: visible">Görünür Başlık</h1>
<p style="font-size: large">Görünür metin parçası<b style="visibility: hidden">görünmez metin parçası</b> ve burası görünüyor.</p>
</body>
</html>

Visibility örneği

Örneği görmek için tıklayınız.

Örnekte gördüğümüz gibi element görünmediği halde sayfadaki yerini korumaktadır. Ayrıca gizli nesneye atanan kenarlık ve zemin rengide görünmemektedir. Ancak elementin konumu etkileyen kenar boşluğu(magrin) ve padding değeri görünmese de sayfayı etkilemektedir.

Ata elementi görünmez olan bir çocuk elemente eğer görünür özelliği atanmış ise ata element görünmez ancak çocuk element görünür. Bu ters bir durum olarak görünür ancak bu bize avantaj sağladığı durumlarda yok değildir. Örnek yaparsak

CSS kodu

p.gorunmez {
    visibility: hidden;
}

p.gorunmez strong {
    visibility: visible;
}

HTML kodu

<p class="gorunmez" <strong>Lorem ipsum dolor sit amet</strong>, consectetuer adipiscing elit. Cras sem. In sagittis mauris eu turpis. Mauris ut lorem nec pede consequat suscipit. </p>

visibility hiyerarşi

Örneği görmek için tıklayınız.

visiblity:collapse özelliği vardır. collapse tablo elementler için hidden etkisi yapar. Ancak burada bir fark var gizlene elementler yerini korumaz. Ayrıca bu özelliği tüm tarayıcılar desteklemiyor, bunun yerine display:none özelliği kullanılır.

2 thoughts on “Kutu Modeli Özelliği

Yorum bırakın