10css padding

Css Ders 10 | Padding

Padding, tanımlanmış herhangi bir sınırın içinde bir öğenin içeriğinin etrafında boşluk oluşturmak için kullanılır.

CSS ile padding üzerinde tam kontrole sahip olursunuz. Bir öğenin her bir tarafı için (üst, sağ, alt ve sol) padding’i ayarlamak için özellikler vardır.

Padding – Tek Taraflar

CSS, bir öğenin her bir tarafı için padding belirtme özelliklerine sahiptir:

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

Tüm padding özellikleri aşağıdaki değerlere sahip olabilir:

  • uzunluk px, pt, cm, vb. cinsinden bir padding belirtir.
  • % – içeren öğenin genişliğinin% ‘si olarak bir padding belirtir
  • inherit – padding’in üst öğeden miras alınması gerektiğini belirtir

Not: Negatif değerlere izin verilmez.

Örnek:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Padding – Kısakod Özelliği

Kodu kısaltmak için tüm padding özelliklerini tek bir özellikte belirtmek mümkündür.

paddingÖzelliği aşağıdaki padding özellikleri için kullanılan bir kestirme niteliktir:

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

Öyleyse, şu şekilde çalışır:

padding dört değer alır:

  • padding: 25px 50px 75px 100px;
    • üst boşluk 25 pikseldir
    • sağ boşluk 50 pikseldir
    • alt boşluk 75 pikseldir
    • sol boşluk 100 pikseldir
div {
  padding: 25px 50px 75px 100px;
}

Eğer paddingözelliğinde üç değer varsa:

  • padding: 25px 50px 75px;
    • üst boşluk 25 pikseldir
    • sağ ve sol boşluklar 50 pikseldir
    • alt boşluk 75 pikseldir
div {
  padding: 25px 50px 75px;
}

Eğer paddingözellik iki değer vardır:

  • padding: 25px 50px;
    • üst ve alt boşluklar 25 pikseldir
    • sağ ve sol boşluklar 50 pikseldir
div {
  padding: 25px 50px;
}

Eğer paddingözelliğinde bir değer varsa:

  • Padding: 25px;
    • dört boşluğun tümü 25 pikseldir
div {
  padding: 25px;
}

Padding ve Öğe Genişliği

CSS widthözelliği, öğenin içerik alanının genişliğini belirtir. İçerik alanı, bir öğenin padding’i, kenarlığı ve kenar boşluğu içindeki kısımdır .

Bu nedenle, bir öğe belirli bir genişliğe sahipse, o öğeye eklenen padding, öğenin toplam genişliğine eklenecektir. Bu genellikle istenmeyen bir sonuçtur.

div {
  width: 300px;
  padding: 25px;
}

Burada <div> öğesine 300 piksellik bir genişlik verilir. Bununla birlikte, <div> öğesinin gerçek genişliği 350 piksel olacaktır (300 piksel + 25 piksel sol padding+ 25 piksel sağ padding)

Genişliği 300 pikselde tutmak için, padding miktarı ne olursa olsun box-sizingözelliği kullanabilirsiniz . Bu, elemanın genişliğini korumasına neden olur; padding’i artırırsanız, mevcut içerik alanı azalacaktır.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}
İletişim: admin@herseymi.com
Yazı oluşturuldu 110

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer yazılar

Aramak istediğinizi üstte yazmaya başlayın ve aramak için enter tuşuna basın. İptal için ESC tuşuna basın.

Üste dön