Css ile Border , Margin ve Padding

Değerli dostlar bu dersimizin konusu ise Css ile Html elementlerimize Border ( kenarlık ), Marign ( Dış boşluk ) ve Padding ( İç boşluk ) gibi özellikler vermek. Sık kullandığımız Css özellikleri arasında yer almaktadır. Şimdi dilerseniz hiç vakit kaybetmeden aşağıda yer alan görsele bakalım ve mantığı kavrayalım.

Css Border – Kenarlık

Css Border özelliği ile Html elementlerimize kenarlık özelliği katabiliriz. Şimdi daha iyi anlamak için aşağıda yer alan örnek kodumuzu inceleyelim.

p {
  border-top: 1px solid red;
  border-bottom: 1px solid blue;
  border-right: 1px solid yellow;
  border-left: 1px solid black;
}

/* Kısa Kullanım */

p{
  border; 1px solid red;
}

Yukarıda yer alan örneğimizde Css ile p Html elementimize kenarlık özelliği ekledik. Kodumuzun açıklaması ise şu şekildedir; 1px kalınlığında, solid şeklinde ve kırmızı olarak elementimize özellik ekle.

Kenarlıklarımızı sadece solid değil diğer özellikleri de kullanabiliriz. bu özelliklerimiz ise; dotted , dashed , double, groove, ridge, inset, outset, hidden ve mixed özelliklerini de kullanabilirsiniz.

Css Margin – Dış Boşluk

Diğer bir konu başlığımız ise Css Margin. Margin ile Html elementlerimize dış boşluk verebiliriz. Margin özelliğimiz; margin-top, margin-right, margin-bottom ve margin-left şeklinde de istediğimiz gibi dış boşluklar verebiliriz. Şimdi bir örnek ile açıklayalım.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

/* Kısa kullanımı */

p{
  margin: 100px 150px 100px 80px; 
}

p{
  margin: 100px 150px; /* Top ve Bottom 100px - left ve right 150px */
}

p{
  margin: 100px: /* Tüm kenarlar için */
}

Yukarıdaki örnek kodumuz da margin ile özelliği ile Elementimize dış boşluk verdik. Hemen ardından 4 satır kodun kısa kullanımı verdik. Css de kısa kullanımlarda saat yönü esasdır. Yani 100px top, 150px right, 100px bottom ve son olarak 80px ise left yönünü ifade eder.

Css Padding – İç Boşluk

Son konu başlığımızda Css Padding özelliği anlatalım ve örnek bir kod gösterelim. Padding ile Html elementlerimize iç boşluk veririz. Şimdi aşağıdaki örnek kodumuzu inceleyelim.

p {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 150px;
  padding-left: 80px;
}

/* Kısa kullanımı */

p{
  padding: 100px 150px 100px 80px; 
}

p{
  padding: 100px 150px; /* Top ve Bottom 100px - left ve right 150px */
}

p{
  padding: 100px: /* Tüm kenarlar için */
}

Yukarıda yer alan örnek kodumuzda kısa kodları ile beraber nasıl kullanıldığını öğrenmiş olduk. Oldukça kolay bir konudur. Örnekler ile konuyu daha iyi kavrayabilirsiniz. Herkese kolay gelsin bir diğer derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares