CSS Margin ve Padding Kullanımı ve Farklılıkları

Margin ve paddin kullanım biçimi ve aralarındaki farklılıklar için ufak bir ders olacak.

Derse başlarken bize gerekli olan CSS ve HTML dosyalarını temin ettikten sonra hemen

HTML dosyasına:

<div id="kutu1">
CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.
</div>

<div id="kutu2">
CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.
</div>

Daha sonra stil.css dosyamıza:

CSS Kodu:

#kutu1{
background-color:#F2D607;
border:2px solid #666;
width:300px;
}
#kutu2{
background-color:#1DBDD6;
border:2px solid #666;
width:300px;
}

önizlemesi şu şekildedir:

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML'e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

Margin(Tablonun dış alanını),Padding(Tablonun iç alanını)kapsar şimdiki örnekte iste farkı daha iyi anlayabilmeniz için önizlemeli olarak gösterelim

Kutu 1'de padding kullanmadık margin komutunu ise margin:20px; olarak ayarladık.

Kutu 2'de margin kullanmadık padding komutunu ise padding:20px; olarak ayarladık.

Takıldığınız bir yer olursa yorum bırakabilirsiniz.

Hiç yorum yok: