- Katılım
- 29 Haz 2019
- Konular
- 482
- Mesajlar
- 2,156
- Çözüm
- 182
- Reaksiyon Skoru
- 1,087
- Altın Konu
- 0
- TM Yaşı
- 6 Yıl 11 Ay 15 Gün
- Başarım Puanı
- 212
- MmoLira
- 2,582
- DevLira
- 33
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
Merhaba arkadaşlar, ben VexraDev.
Konulara hiç ara vermeden devam ediyorum.
Css box model yani css kutu model nedir ve hangi amaç için kullanılır? Margin, padding ve border nedir nasıl kullanılır ?
Css Box Model yani css kutu model, html 'de bulunan her bir nesnenin etrafında olan bir kutuyu temsil eder.
Bu kutu modeli nesnelerin birbiri ile arasındaki mesafe (margin), kutu ile içerik arasındaki mesafe (padding) ve kutunun etrafındaki kenarlık (border) ile ilgili çalışmaları temsil eder.
Margin: Farklı nesneler arasındaki mesafeyi temsil eder.
Örneğimizde her iki kutununda üstten birbiri ile arasındaki mesafeyi arttırdığımıza dikkat ediniz.
Margin ya da padding özelliklerini kullanırken kullandığımız yöntemler;
** margin: 5px; ile bir kutunun 4 köşesinden 5px'lik bir mesafe bırakmış oluruz. Tek bir değer kullandığımızda margin-top, margin-right, margin-bottom ve margin-left değerlerine 5px atamış oluruz.
** margin: 5px 10px; ile bir kutunun üst ve alt köşesinden 5px, sağ ve sol köşesinden ise 10px' lik bir boşluk bırakmış oluruz. İki değer kullandığımızda ilk değer (5px) üst ve alt, ikinci değer ise sağ ve sol kenarı (10px)temsil eder.
** margin: 5px 10px 5px 10px; ile 4 köşeden margin tanımlamalarını tek tek yapmış oluruz. Sırasıyla margin-top, margin-right, margin-bottom ve margin-left şeklinde saat yönünde tek tek değerler ile tanımlama yapmış oluruz.
Padding: Bir nesnenin içeriği ile kenarlık arasında kalan mesafe padding değeri ile ifade edilir.
Örneğimizde kutu içindeki içeriklerin etrafındaki kırmızı kenarlık ile arasında oluşturduğumuz mesafeleredikkat ediniz. Bu mesafe padding ile ifade edilir.
** 4 köşeden yaptığımız padding tanımlama şekilleri aynen margin tanımlamalarında olduğu gibidir.
Border : Nesnelerin etrafına eklediğimiz kenarlıklar border ile ifade edilir.
Örneğimizde .box sınıfına sahip eleman 1px kalınlığında, solid çizgi türünde ve kırmızı renkte bir kenarlığa sahip olur.
border: kenarlık kalınlığı çizgi türü renk şeklinde bir tanımlama yapabiliriz.
Konulara hiç ara vermeden devam ediyorum.
Css box model yani css kutu model nedir ve hangi amaç için kullanılır? Margin, padding ve border nedir nasıl kullanılır ?
Css Box Model yani css kutu model, html 'de bulunan her bir nesnenin etrafında olan bir kutuyu temsil eder.
Bu kutu modeli nesnelerin birbiri ile arasındaki mesafe (margin), kutu ile içerik arasındaki mesafe (padding) ve kutunun etrafındaki kenarlık (border) ile ilgili çalışmaları temsil eder.
Margin: Farklı nesneler arasındaki mesafeyi temsil eder.
Kod:
<p class="first box"> Css Dersleri</p>
<p class="second box"> Css Dersleri 2 </p>
.box{
border:1px solid red;
}
.first{
margin-top:20px;
}
.second{
margin-top:50px;
}Örneğimizde her iki kutununda üstten birbiri ile arasındaki mesafeyi arttırdığımıza dikkat ediniz.
Margin ya da padding özelliklerini kullanırken kullandığımız yöntemler;
** margin: 5px; ile bir kutunun 4 köşesinden 5px'lik bir mesafe bırakmış oluruz. Tek bir değer kullandığımızda margin-top, margin-right, margin-bottom ve margin-left değerlerine 5px atamış oluruz.
** margin: 5px 10px; ile bir kutunun üst ve alt köşesinden 5px, sağ ve sol köşesinden ise 10px' lik bir boşluk bırakmış oluruz. İki değer kullandığımızda ilk değer (5px) üst ve alt, ikinci değer ise sağ ve sol kenarı (10px)temsil eder.
** margin: 5px 10px 5px 10px; ile 4 köşeden margin tanımlamalarını tek tek yapmış oluruz. Sırasıyla margin-top, margin-right, margin-bottom ve margin-left şeklinde saat yönünde tek tek değerler ile tanımlama yapmış oluruz.
Padding: Bir nesnenin içeriği ile kenarlık arasında kalan mesafe padding değeri ile ifade edilir.
Kod:
.box{
border:1px solid red;
}
.first{
padding:20px;
}
.second{
padding-left:50px;
}Örneğimizde kutu içindeki içeriklerin etrafındaki kırmızı kenarlık ile arasında oluşturduğumuz mesafeleredikkat ediniz. Bu mesafe padding ile ifade edilir.
** 4 köşeden yaptığımız padding tanımlama şekilleri aynen margin tanımlamalarında olduğu gibidir.
Border : Nesnelerin etrafına eklediğimiz kenarlıklar border ile ifade edilir.
Kod:
.box {
border:1px solid red;
}Örneğimizde .box sınıfına sahip eleman 1px kalınlığında, solid çizgi türünde ve kırmızı renkte bir kenarlığa sahip olur.
border: kenarlık kalınlığı çizgi türü renk şeklinde bir tanımlama yapabiliriz.
Son düzenleme: