HTML5 - Dolgu

NS dolgu malzemesi HTML'de içerik ve onları içeren kutunun kenarları arasında bir boşluk oluşturmamıza izin verir, bu şekilde öğeye hava verebilir ve ilginç grafik efektleri elde edebiliriz.

• Dolgu üst: Üst kenar için dolguyu başlatır, ölçümleri uzunluk veya yüzde olarak ifade edilir.
• Dolgu-sağ: Sağ kenar için dolguyu başlatır, ölçümleri uzunluk veya yüzde olarak ifade edilir.
• Dolgu-alt: Alt kenar için dolguyu başlatır, ölçümleri uzunluk veya yüzde olarak ifade edilir.
• Dolgu-sol: Sol kenar için dolguyu başlatır, ölçümleri uzunluk veya yüzde olarak ifade edilir.
• Dolgu malzemesi: Bu kısayol, dolgunun tüm kenarlıkları ile tek bir satırda başlatılmasını yapmamıza yardımcı olur.

Bir başlatma işlemini yaptığımızda sınırlamamız gereken önemli bir şey dolgu malzemesi Yüzde ölçümlerini kullanmak, bu yüzdenin yalnızca öğenin genişliğine göre alınacağı, asla yüksekliğe göre alınmayacağıdır.
Şimdi basit bir kodla nasıl uygulanacağını görelim. dolgu malzemesi HTML5 belgemizde.

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Bu koddan da görebileceğimiz gibi, oldukça ilginç şeyleri vurgulayabiliriz, yakından bakarsak, dolgu yaptığımız öğeye zaten başka stiller uyguladık ve yani, sonucumuzu elde etmek için diğer öğelerle karıştırabiliriz, yapabiliriz. ayrıca ölçü birimini kullandığımızı da görün em onun yerine pikselİkisi uyumlu olsa da, çok yönlülüğünü görebildiğimiz bir soru; nihayet tarayıcımızda bunun nasıl göründüğüne bakalım:

Şimdi, kısayolumuzu başlatmak için kısayolu nasıl uygulayacağımızı görelim. dolgu malzemesi tek satırda bunun için dolgu ölçülerinin sırası şu şekildedir: Yukarı, Sağ, Aşağı, Sol; Buna ek olarak değerleri atladığımızda diğer değer de atlanmayan değere ayarlanır, örneğin solu atlarsak sağın değerini, alt olanı atlarsak değeri alır. üsttekinden sadece bir değer koyarsak, dört taraf da aynı değeri alacaktır.
Tüm bu teoriyi bir uygulama kodu ile göstereceğiz, tek satırda padding'i çok basit bir şekilde nasıl uyguladığımızı görelim.

 Örnek
Pek çok farklı meyve türü vardır - tek başına 500'den fazla muz çeşidi vardır. Sayısız elma, portakal ve diğer bilinen meyveleri eklediğimizde binlerce seçenekle karşı karşıyayız.

Gördüğümüz gibi, padding bildirimi pek değişmiyor ve birkaç satır kaydettik, tarayıcıda nasıl görüneceğine bir göz atalım:

Bu elemanda onu oldukça düzensiz bir kenarlıkla oluşturuyoruz, eğer dolgu uygulamasaydık kenarlık metni yakalayacaktı, değişikliği yapın ve farkı görmek için tarayıcılarınızda kontrol edin.
Bununla HTML5 dolgu öğreticimizi bitiriyoruz, artık HTML belgesindeki içeriğimizi içeren öğeler içinde boşluklar oluşturabiliriz ve geriye bu öğreticide öğrendiklerimizi öğrenene kadar alıştırma yapmaya devam etmek kalıyor.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.