CSS ile Kutu Olusturma ve Kenarliklar

13.04.2017

  • Width
  • Height
  • Float
  • Clear

Kutu Modeli

width

Yapisi : width: (deger) Aldigi Degerler : [][] | [][] | auto | inherit\\ **Baslnagiç degeri:** auto\\ **Uygulanabilen elementler:** [Block-level ve replaced elementler][]\\ **Kalitsallik:** Yok

Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir genislik(width) degeri alir. Elementlerin baslangiçtaki genislik degeri auto yani kendi asil genisligidir. (Örnegin bir resmin genisligi gibi) Yüzde degeri ebveyn elementi kistas alarak uygulanir. Negatif degeri almaz.

:::css
p {
	width: 200px;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

height

Yapisi : height: (deger) Aldigi Degerler : [][] | auto | inherit\\ **Baslangiç degeri:** auto\\ **Uygulanabilen elementler:** [Block-level ve replaced elementler][]\\ **Kalitsallik:** Yok

Blok-level ve replaced elementlerin(örn: img, input, textarea vd.) tümü bir yükseklik(height) degeri alir. Elementlerin baslangiçtaki yükseklik degeri auto yani kendi asil yüksekligidir. (Örnegin bir resmin yüksekligi gibi) Negatif degeri almaz.

:::css
h2 {
	height: 0.25in;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

float

Yapisi : float: (deger) Aldigi Degerler : left | right | none |inherit
Baslnagiç degeri: none
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

float özelligi bir elementi(img, table, div vd.) konumuNu belirlemek(saga veya sola ) için kullanilir. Siz bir elemente flaot=left degeri verirseniz diger elementler o elementin sagindan akar. Bu HTML3,2 deki resime(img) uygulanan align=”left” ve align=”right” ile özdes bir özelliktir. Ancak CSS 1 tüm elementlere float özelligi vermemizi sagliyor. HTML 3,2 sadece img ve table için bu özelligi kullanmamiza izin veriyordu. float özelligi sonraki derslerde daha ayrintili gösterilecektir. float özelligi CSS ile tablosuz web sitesi olusturma metodunun en önemli ögelerinden biridir.

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

Kutu elementlerin görünümüne çesitli etkiler yapan özellikleri görecegiz bu makalede çogu CSS2 ile birlikte gelen bu özellikler asagida siralanmistir.

  • overflow - tasma
  • clip - kirpma
  • visibility - görünürlük

Overflow

Yapisi: overflow: (deger) Aldigi Degerler: visible | hidden | scroll | auto | inherit
Baslnagiç degeri: visible
Uygulanabilen elementler: blok-level elementler ve replacement elementlere
Kalitsallik: Yok

Türkçeye tasmak(overflow) olarak çevirdigimiz bu özellik sinirlarini belirledigimiz kutu elementinin içeriginin sinirlari asmasi durumunda nasil davranacagini bildiren bir özelliktir. Özellige atanan degerleri tek tek incelersek.

  • inherit - kalitsallik üst elementin degerini alabilir
  • visible - kutu sinirlari disina tasan alanlari göster
  • hidden - kutu sinirlari disina tasan alanlari gizle.
  • scroll - kutu sinirlarini tasan kismi kaydirma çubugu ile ulasmamizi saglar.
  • auto - kutu sinirlarini asmasi durumunda scroll ile ayni etkiyi yapar.

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

overflow:visible Overflow’in baslangiç degeri visible’dir. Bu deger tasma olan kisimlarin gösterilmesini saglar.

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

overflow

Kodun yeni nesil tarayicilardaki görünümü

overflow özelliginin degeri visible oldugu için içerik tasmasina ragmen tasan bölümler gösterilmistir.

overflow:scroll Eger içerigin tasmasini engellemek istiyorsak ama yinede tasan kisimlara ulasilmasi için kaydirma çubugu çikmasi için scroll özelligi ekleriz.

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

overflow scroll

overflow:scrool olma durumu

overflow:hidden Eger overflow:hidden degeri atarsak. Sinirladigimiz kutunun disina tasan kisimlar gösterilmeyecektir.

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

kodu bu sekilde degistirdigimizde görüntü asagidaki gibi olacaktir.

overflow:hidden

overflow:auto Son olarakta otomatik degeri vardir. Bu degeri atayinca kutu içerigine göre otomatik islem yapacaktir. Eger tasma olmuyorsa kaydirma çubugu çikmayacaktir. Ama eger içerik tasiyorsa kaydirma çubugu çikacaktir.

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

overflow:auto

Dikkat ederseniz scroll’dan farkli olarak sadece dikey kaydirma çubugu çikmistir. Yatayda bir tasma olmadigi için yatay kaydirma çubugu çikmamistir.

Örnegi görüntülemek için tiklayiniz.

Safari’nin eski sürümlerinde sorun çikariyor 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

Bunlarin disinda Internet Explorer’ün tescilledigi ve CSS3 standartlarinda yer alan iki adet özellik daha vardir. overflow-x ve overflow-y

overflow-x ve overflow-y: Internet Explorer5x ve üzeri sürümlerden itibaren destekledigi bu özellikler aslinda overflow gibi çalisir. Buradaki x ve y’dende anlasildigi gibi overflow özelligini yatay ve dikey olarak ikiye ayiran özelliklerdir. overflow-x özelligi yatayda tasma olmasi durumunda tasan kisimlara uygulanacak özellikleri(visible, scroll, hidden ve auto) atmamizi saglar. overflow-y’de dikeyde ayni seyi yapar. Firefox’unda 1.1 versiyonundan itibaren bu özellikleri desteklemesi kullanilabilirligini arttirmistir. Tabi biraz daha beklemekte yarar var.

Örnekler için tiklayiniz. (brunildo.org’dan)

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

clip

Yapisi : clip: rect(<üst>,<sag>,<alt>,<sol>)
Aldigi Degerler : rect(top, right, bottom, left) | auto | inherit
Baslangiç degeri: auto
Uygulanabilen elementler: mutlak konumlandir uygulanmis elementler (CSS2’den itibaren blok-level elementler ve replacement elementlere )
Kalitsallik: Yok

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

Not W3C standartlari belirlerken konumlandirmalar arasinda virgül konmasini öneriyor. Ancak garip bir sekilde IE virgül kullanilan örnekleri normal modda farkli yorumlamaktadir. Acayip modda ise dogru yorumlamaktadir. Ne yapalim bizde tüm tarayicilara uygun olmasi için virgül kullanamayacagiz

clip, elementin içeriginin belli bir bölümünün gösterilmesi saglar. Baslangiç degerinin auto atanmis olmasi herhangi bir kirpmanin olmayacagini gösterir.

Resim düzenleme araçlarinda yaptigimiz kirpma isini CSS yardimiyla yapmamizi saglayan bu özelligi Javascript ile birlikte kullanarak çok güzel uygulamalar yapabiliriz.

Clip’e atanan degerler em cinsinden verilerek esnek sonuçlar elde edilebilir. Ayrica negatif degerlerde alabilir. Negatif deger atandiginda element kutusunun disina dogru kirpma yapacaktir.

kirpma

Bir örnek yapalim.

CSS kodu:

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

HTML kodu:

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

Kirpma

örnegin görüntüsü

Örnegi görmek için tiklayiniz.

visibility

Yapisi : visibility: <deger>
Aldigi Degerler : visible | hidden | collapse | inherit
Baslnagiç degeri: visible
Uygulanabilen elementler: tüm elementlere
Kalitsallik: Yok

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

Görünürlük(visibility) özelligi nesnelerin görünümünü belirler. Degeri visible ise element görünür. Eger degeri hidden ise element görünmezdir. Eger bir elementin görünürlük degeri hidden olarak atanmis ise element sayfa yapisindaki yeri korur ancak gözle görülmez.

:::html
<html>
<head>
<title>visibility Örnegi</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 Baslik</h1>
<h1 style="visibility: hidden; background-color:#f00; border:1px solid #000; margin:20px 0; padding-top:10px;">Görünmez Baslik</h1>
<h1 style="visibility: visible">Görünür Baslik</h1>
<p style="font-size: large">Görünür metin parçasi<b style="visibility: hidden">görünmez metin parçasi</b> ve burasi görünüyor.</p>
</body>
</html>

Visibility örnegi

Örnegi görmek için tiklayiniz.

Örnekte gördügümüz gibi element görünmedigi halde sayfadaki yerini korumaktadir. Ayrica gizli nesneye atanan kenarlik ve zemin rengide görünmemektedir. Ancak elementin konumu etkileyen kenar boslugu(magrin) ve padding degeri görünmese de sayfayi etkilemektedir.

Ata elementi görünmez olan bir çocuk elemente eger görünür özelligi atanmis 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 sagladigi durumlarda yok degildir. Örnek yaparsak

CSS kodu

:::css
p.gorunmez {
	visibility: hidden;
}

p.gorunmez strong {
	visibility: visible;
}

HTML kodu

:::html
<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 hiyerarsi

Örnegi görmek için tiklayiniz.

visiblity:collapse özelligi vardir. collapse tablo elementler için hidden etkisi yapar. Ancak burada bir fark var gizlene elementler yerini korumaz. Ayrica bu özelligi tüm tarayicilar desteklemiyor, bunun yerine display:none özelligi kullanilir.

 

clear

Yapisi : clear: (deger) Aldigi Degerler : none | left | right | both
Baslnagiç degeri: tanimsiz
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

Resim ve metin elementleri diger elementlere göre floting element olarak tanimlanir. clear özelligi floating uygulanmayan elemente köse tanimi yapar. left degeri uygulandigi elementi floating elementin bir alt soluna atar, right özelligi benzer sekilde saga atar, none özelligi elementin baslangiç degerini geri döndürür ve both degeride iki floating elementin asagisina atar. clear özelligi sonraki derslerde daha ayrintili gösterilecektir. clear özelligi CSS ile tablosuz web sitesi olusturma metodunun en önemli ögelerinden biridir.

:::css
h3 {
	clear: left;
}

 

Kenarlik(border), içerik alani ve padding etrafindaki bir veya daha fazla çizgiye denir.

Kutu Modeli

  • 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

Sirasiyla incelersek:

border-style

Yapisi : border-style: <deger>
Aldigi Degerler : [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4} | inherit
Baslnagiç degeri:tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

border-style özelligi kenarlik stilini belirlememizi saglar.(Örn: dotted(noktali), double(çift) vd.) 10 farkli degeri CSS desteklemektedir. Bu özellik kenarligin görünmesi için tanimlanmasi gereklidir. Bir veya dört deger alabilir eger dört deger alirsa sirasiyla üst, sag, alt ve sol kenarlik stilini belirler. Eger tek degeri varsa tüm kenarlik degeri atamasi yapilmis demektir. Eger iki veya üç deger atamasi yapilmis ise margin‘de gördügümüz siralama söz konusudur.

:::css
p.yeni {
	border-style: solid;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

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

Yapisi : border-[top,left,right,bottom]-style: <deger>
Aldigi Degerler : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
Baslangiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

border-top-style, border-right-style, border-bottom-style, border-left-style border-style özelliginin her kenara ayri ayri atamasini yapabilmek için kullanilir.

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

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border-width

Yapisi : border-width: (deger) Aldigi Degerler : [ thin | medium | thick | <uzunluk degeri> ]{1,4} | inherit
Baslnagiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

Ilk olarak stili belirledikten sonra kenarlik kalinligini belirlemek için border-width degeri kullanilir.

border-width yüzde degeri alamaz.

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

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

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

Yapisi : border-[top,left,right,bottom]-width: (deger) Aldigi Degerler : thin | medium | thick | <uzunluk degeri> | inherit
Baslnagiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

border-top-width, border-right-width, border-bottom-width, border-left-width border-width özelliginin her kenara ayri ayri atamasini yapabilmek için kullanilir.

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

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border-color

Yapisi : border-color: (deger) Aldigi Degerler : [ <renk> | transparent ]{1,4} | inherit
Baslnagiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

border-color özelligi kenarlik rengini belirler. (X)html’deki bordercolor ile benzerdir.

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

Tek deger tüm kenarlik renklerini belirler, her kenar için ayri renk tanimlamasida yapilabilir.

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

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

Yapisi : border-[top,left,right,bottom]-color: (deger) Aldigi Degerler : [ <renk> | transparent ]{1,4} | inherit
Baslnagiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

border-colorözelliginin her kenara ayri ayri atamasini yapabilmek için kullanilir.

Not: Bir kenarligi yok etmek için kalinlik degeri veririz. Birde CSS2 ile birlikte gelen transparent özelligi vardir ki bu kenarligi yok etmez sadece görünmez yapar.

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

Tek deger tüm kenarlik renklerini belirler, her kenar için ayri renk tanimlamasida yapilabilir.

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border

Yapisi : border: <deger>
Aldigi Degerler : <border-width> | <border-style> | <renk>
Baslnagiç degeri: tanimlama yok
Uygulanabilen elementler: tüm elementler
Kalitsallik: Yok

borderyukarida siraladigimiz özellikleri tek sefer de tanimlamak için kullanilir. Bir kisaltmadir.

:::css
h1 {
	border: thick silver solid;
}

Bu özellikleri tek tek atamak isteseydik söyle bir kod yazmamiz gerekecekti.

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

 

Margin özelligi elementin etrafindaki bosluk olarak tanimlanir. Negatifdeger alabilir. Tek tek özellikler(margin-top,margin-left vd.) atanabildigigibi tek bir özellikle(margin) de tanimlama yapilabilir. Margin özelliklerinianlamak için lütfen Box modellerine bir göz atin.

Kutu Modeli

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

margin-top

Yapisi : margin-top: (deger) Aldigi Degerler : [][] | [][] | auto\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

margin-top özelligi elementin üst kenar boslugunu bellibir deger kadar veya yüzde olarak belirler.Negatif deger alabilir.

:::css
body {
	margin-top: 0
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

margin-right

Yapisi : margin-right: (deger) Aldigi Degerler : [][] | [][] | auto\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

margin-right özelligi elementin sag kenar boslugunu bellibir deger kadar veya yüzde olarak belirler.Negatif deger alabilir.

:::css
p.diger {
	margin-right: 50%
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

margin-bottom

Yapisi : margin-bottom: (deger) Aldigi Degerler : [][] | [][] | auto\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

margin-bottom özelligi elementin alt kenar boslugunu bellibir deger kadar veya yüzde olarak belirler.Negatif deger alabilir.

:::css
p {
	margin-bottom: 10px
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

margin-left

Yapisi : margin-left: (deger) Aldigi Degerler : [][] | [][] | auto\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

margin-left özelligi elementin sol kenar boslugunu bellibir deger kadar veya yüzde olarak belirler.Negatif deger alabilir.

:::css
p {
	margin-left: 10px
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

margin

Yapisi : margin: (deger) Aldigi Degerler : [[][] | [][] |auto]{1,4}\\ **Baslnagiç degeri:** Tanimsiz\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

margin özelligi yukardaki özelliklerin tek bir özellikle uygulanmasi içinkullanilir.

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

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

yukarida h1 için margin degerleri siralamasi söyledir:

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

ikili ve üçlü kullanimda mevcuttur

:::css
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 alani ile kenarlik arasindaki alandir.

Kutu Modeli

padding-top

Yapisi : padding-top: (deger) Aldigi Degerler : [][] | [][] | inherit\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

padding-top özelligi içerik alani ile üst kenarlik arasindakimesafeyi belirler.

:::css
h2 {
	padding-left: 0.25in;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

padding-right

Yapisi : padding-right: (deger) Aldigi Degerler : [][] | [][] | inherit\\ **Baslangiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

padding-right özelligi içerik alani ile sag kenarlik arasindakimesafeyi belirler.

:::css
h2 {
	padding-right: 0.25in;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

padding-bottom

Yapisi : padding-bottom: (deger) Aldigi Degerler : [][] | [][] | inherit\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

padding-bottom özelligi içerik alani ile alt kenarlik arasindakimesafeyi belirler.

:::css
h2 {
	padding-bottom: 0.25in;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

padding-left

Yapisi : padding-left: (deger) Aldigi Degerler : [][] | [][] | inherit\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalitsallik:** Yok

padding-left özelligi içerik alani ile sol kenarlik arasindakimesafeyi belirler.

:::css
h2 {
	padding-left: 0.25in;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

padding

Yapisi : padding: (deger) Aldigi Degerler : [][] | [][]{1,4} | inherit\\ **Baslnagiç degeri:** 0\\ **Uygulanabilen elementler:** Block-level ve replaced elementler\\ **Kalitsallik:** Yok

paddingözelligi padding-top, padding-right, padding-bottomve padding-left degerlerini kisayoldan atamak için kullanilir.

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

margin‘deki gibi farkli kullanim sekilleri mevcuttur.

 

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN