Hazır Css Kodları (Margin ve Padding)

Web sayfalarımızı tasarlarken önce Html ile genel yapıyı oluşturuyoruz. Daha sonra bu yapıyı Css özellikleri ile gerçek birer web sayfası haline getiririz. Tabi Css kodları yazarken belki de en çok kullandığımız özelliklerin başında margin ve padding geliyordur. Çok kullandığımız için de bazen aynı Css kodları tekrar edip duruyor. Aynı zamanda gereksiz zaman kaybı da yaşıyoruz. İşte bu yazımda daha önceden hazırlamış olduğum margin ve padding hazır css kodları ile tasarımlarımızda nasıl zamandan kazanabiliriz onu anlatacağım. Kodları yazının sonunda link olarak ekledim. İsterseniz sıkıştırılmış halide mevcut onuda indirebilirsiniz.

 Önemli :  Öncelikle indireceğiniz kodları kendi Css dosyanıza eklemeyi unutmayın! 

Hazır css kodları ile neler yapabildiğimize bakmadan önce kodlardan örnek bir kısım paylaşmak istiyorum.

Bu şekilde;

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

için 0’dan başlayarak 100’e kadar 5’er artacak şekilde yazdım.

Örneğin class’ı menu olan bir div’imiz olsun. div’e margin:auto; vermek için normalde aşağıdaki gibi yazmamız gerekiyor.

Hazır css kodları ile aynı işlevi div’in class’ına sadece ma yazarak yapabilirsiniz.

Başka bir örnek daha verelim. Bu defa div’e margin 30px , padding 40px vermek istediğimizi düşünelim. Bunun için div’in class’ına m30 ve p40 yazmamız yeterli.

Son bir örnek daha verelim. Şu şekilde kodlarımız olsun.

Şimdi de bunu hazır css kodları ile nasıl yazabildiğimize bakalım.

 ⇒  Bu kodların bize artısı, özellikle front-end alanıyla ilgilenen arkadaşlara projelerini geliştirirken biraz daha zamandan kazanmalarını sağlamak. Aynı zamanda margin ve padding değerlerini pratik olarak vermek.

Umarım sizin için faydalı bir yazı olmuştur. Şu yazılarda ilginizi çekebilir.

Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..) 

Html ve Css ile Sosyal Medya Butonları Yapımı

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Css ile Yatay Açılır Menü Yapımı

Responsive Menü Yapımı

Kaynak dosyayı indir

Kaynak dosyayı sıkıştırılmış olarak indir

Yeni bir yazımda görüşmek üzere.

Leave a Reply

WEB TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +