Eğer Html belgesine Internal CSS kullanarak padding eklemek istiyorsak aşağıdaki adımları takip etmemiz gerekmektedir. Bu basit adımları kullanarak dolguyu kolayca ekleyebiliriz.

Aşama 1: Öncelikle herhangi bir metin düzenleyicide Html kodunu yazmamız veya mevcut Html dosyasını dolgu eklemek istediğimiz metin düzenleyicide açmamız gerekiyor.

 Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding. 

Adım 2: Şimdi imleci Html belgesinin başlık etiketinin hemen sonrasına, head etiketine yerleştirmemiz ve ardından aşağıdaki blokta gösterildiği gibi etiketleyin.

 Add the Padding in Html 

Aşama 3: Şimdi padding eklemek istediğimiz metnin hemen öncesinde belirtilen id seçicide padding özelliğini tanımlamamız gerekiyor.

monitör nedir

Her iki tarafa da dolgu uygulayabileceğimiz beş farklı özellik aşağıda verilmiştir:

Ben. Sol dolgu:

Bir öğeye yalnızca sol dolgu uygulamak istiyorsak, yalnızca sol dolguyu kullanmak zorundayız. sol dolgu Kimlik seçicideki özellik. Daha sonra aşağıdaki örnekte gösterildiği gibi özelliğe yalnızca bir değer ayarlamamız gerekir:

 Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. 

Padding-left özelliğini kullanan yukarıdaki kodun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

ii. Sağ dolgu:

Bir öğeye yalnızca doğru dolgu uygulamak istiyorsak yalnızca sağ dolgu Kimlik seçicideki özellik. Daha sonra aşağıdaki örnekte gösterildiği gibi özelliğe yalnızca bir değer ayarlamamız gerekir:

 Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. 

Padding-right özelliğini kullanan yukarıdaki kodun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

iii. Dolgu Üstü:

Java'da int'i string'e dönüştürmek

Bir elemana yalnızca üst dolgu uygulamak istiyorsak, yalnızca üst dolguyu kullanmak zorundayız. dolgulu üst Kimlik seçicideki özellik. Daha sonra aşağıdaki örnekte gösterildiği gibi özelliğe yalnızca bir değer ayarlamamız gerekir:

 Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. 

Padding-top özelliğini kullanan yukarıdaki kodun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

iv. Alt Dolgu:

bir milyarda kaç milyon var

Bir elemana yalnızca alt dolgu uygulamak istiyorsak, yalnızca alt dolguyu kullanmak zorundayız. dolgulu alt Kimlik seçicideki özellik. Daha sonra aşağıdaki örnekte gösterildiği gibi özelliğe yalnızca bir değer ayarlamamız gerekir:

 Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. 

Padding-bottom özelliğini kullanan yukarıdaki kodun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

v. Dolgu:

Dört tarafa da (üst, alt, sol, sağ) farklı dolgu uygulamak istiyorsak, padding özelliğinde dört değeri belirtmemiz gerekir.

 padding: 10px 50px 75px 200px; 

İki değeri belirtirsek, Html editörü ilk dolguyu üste ve aşağıya, ikinci dolguyu sola ve sağa uygular.

 padding: 100px 50px; 

Padding özelliğinde sadece değer belirtirsek, Html editörü aynı dolguyu dört tarafa da uygular.

 padding: 100px; 

Dolgu Özelliğine Örnekler:

Örnek 1: Aşağıdaki örnek, aynı dolguyu dört tarafa da ayarlamak için padding özelliğindeki bir değeri kullanır.

 Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. 

Örnek 1'in çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

sonraki Java'sı var

Örnek 2: Aşağıdaki örnekte iki değer kullanılmaktadır: dolgu malzemesi Aynı dolguyu karşıt taraflara ayarlama özelliği.

 Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. 

Örnek 2'nin çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:

Örnek 3: Aşağıdaki örnek, dört kenarın tamamına farklı dolgu ayarlamak için padding özelliğindeki dört değeri kullanır.

 Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. 

Örnek 3'ün çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir: