Ana içeriğe atla

Css Margin ve Padding kullanımı

padding CSS'te hücre içi boşlukmargin ise hücre dışı boşluk anlamındadır. border ise sınır anlamındadır. Metinleri ve diğer içerikleri hizalamak için sıklıkla padding'i, div'leri sayfaya ve birbirleri arasında hizalamak içinse margin'i kullanacağız.






css'te padding ve margin


padding

padding özelliği hücre içi boşluk vermek için kullanılır. Buradaki hücre tanımı <div>'i temsil etmektedir. style.css dosyasına dönüyoruz ve aşağıdaki kodları yazıyoruz.
?
1
2
3
4
5
6
7
8
div {
    width: 600px;
    height: 300px;
    background-color: goldenrod;
    color: darkslategray;
    font-size: 18px;
    padding: 50px;
}


div elementimize padding özelliğini ve 50px değerini ekledik. Şimdi tekrar F5'e basıyor ev ekran çıktımıza bakıyoruz.




css'te padding ve margin

Gördüğünüz gibi dört bir yana 50px'lik bir hücre içi boşluk vermiş olduk.

margin

margin özelliği hücre dışı boşluk vermek için kullanılır. style.css dosyamıza dönüyoruz ve aşağıdaki kodları yazıyoruz.

?
1
2
3
4
5
6
7
8
9
div {
    width: 600px;
    height: 300px;
    background-color: goldenrod;
    color: darkslategray;
    font-size: 18px;
    padding: 50px;
    margin: 50px;
}

Çalışan penceremizi F5 ile refresh ediyoruz ve ekran görüntüsünün nasıl değiştiğini inceliyoruz.




css'te padding ve margin


Görüldüğü gibi 50px'lik bir hücre dışı boşluk vermiş olduk.

?
1
2
3
4
5
6
7
8
9
div {
    width: 600px;
    height: 300px;
    background-color: goldenrod;
    color: darkslategray;
    font-size: 18px;
    padding-left: 50px;
    margin-left: 50px;
}

İsterse bu boşlukları sadece sol tarafa da verebiliriz. Yukarıdaki örnekte sola 50px hücre içi ve dışı boşluk verdik. Ekran görüntümüz ise şu şekilde olacaktır.




css'te padding ve margin

 
Dört bir yana ayrı ayrı hücre içi boşluklar vermek için aşağıdaki kodları kullanabiliriz.

?
1
2
3
4
5
6
7
8
div {
    width: 600px;
    height: 300px;
    background-color: goldenrod;
    color: darkslategray;
    font-size: 18px;
    padding: 25px 50px 75px 100px;
}




css'te padding ve margin
 
Bu dört sayı saat yönüne göre hesaplanır. 25px padding-top, 50px padding-right, 75px padding-bottom ve 100px padding-left anlamındadır. Sıklıkla kullanılan bir yöntemdir. Aynı şekilde margin içinde bu şekilde hücre dışı boşluklar verebiliriz.

Yorumlar

Bu blogdaki popüler yayınlar

CSS üstte sabit duran menü yapımı

Sitenin en üstünde sabir şekilde duran menüler ile birçok site ve blog’da karşılaşıyoruz. Benzer bir menüyü sizde sitenize eklemek istiyorsanız basitçe özel hazırlanan bu örneği de kullanabilirsiniz. HTML Kodu: < html > < head >      < meta charset = "utf-8" >      < title >Yusuf Akdin</ title >      < link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > < body >      < div class = "ust" >          Üst taraftaki sabit menü      </ div >      < div class = "orta" >          Site İçeriği      </ div > </ body > </ html > CSS Kodu: html,body{      margin :  0 ;      padding :...

Apple Bilgisayarlarının Hızının Sırları: Donanım, Yazılım ve Mühendislik İnovasyonunun Gücü

Apple bilgisayarlarının hızını ve performansını anlamak için, hem donanım hem de yazılım düzeyinde incelemeler yapmak gerekir. Apple, bilgisayarlarının hızını artırmak için birkaç temel faktörü bir araya getiriyor. Apple bilgisayarlarının hızının arkasında birçok mühendislik çözümü bulunuyor. Donanım ve yazılım arasındaki mükemmel entegrasyon, Apple Silicon işlemcilerin verimli ARM mimarisi, yüksek performanslı bellek ve özel yazılımlar sayesinde Apple bilgisayarları, yüksek işlem gücü, düşük enerji tüketimi ve hızlı uygulama performansı sunuyor. Apple’ın, donanım ve yazılım alanlarındaki özelleştirmeleri, kullanıcıların en verimli deneyimi yaşamasını sağlayarak, hız ve performans konusunda diğer markalarla kıyaslandığında önemli bir avantaj elde etmelerine olanak tanıyor. 1. Donanım ve Apple Silicon İşlemciler Apple'ın hızının en önemli nedenlerinden biri, kendi işlemcilerini üretmeye başlamasıdır. 2020 yılında Apple, Intel işlemciler yerine kendi geliştirdiği Apple Silicon seris...

Katmanlı ve Çok Katmanlı Yazılım Mimarisi

Çok katmanlı yazılım mimarisi nedir? sorusundan önce katmanlı yazılım mimarisi nedir? onu inceleyelim. Katmanlı Yazılım Mimarisi Yazılım projelerinin ilk aşamada iş yükü olarak görünse de, sürdürülebilirlik açısından çok daha az maliyetli ve kullanım kolaylığı sağlayan bazı temel yapı taşları vardır. Bunlardan biri de kuşkusuz katmanlı mimari oluşturulmasıdır. Peki katmanlı mimarinin bize kazanımları nelerdir ve neye göre nasıl oluşturulur temel olarak bir inceleyelim. Katmanlı mimarinin en büyük yararı, kodlarımızı daha küçük yapılara bölerek kolay kontrol edilebilirlik ve güncellenebilirlik sağlar . Ayrıca verilerimizin güvenliğini de en yüksek seviyede korur. Örneğin bir web projesi için, tüm veritabanı işlemlerimizi, butonların arkasına yazılan bir sorgu olarak yaparsak, tasarım değişikliğinde tüm kodları tekrardan yazmamız gerekir. Ya da çıkan her hangi bir sorun anında, katmanlı mimaride sadece sorunlu kısmı inceleyecekken, monolithic adı verilen tek katmanlı yazılımda t...