Jeśli chcemy dodać dopełnienie w dokumencie HTML za pomocą wewnętrznego CSS, musimy wykonać kroki podane poniżej. Stosując te proste kroki, możemy łatwo dodać dopełnienie.

Krok 1: Na początek musimy wpisać kod HTML w dowolnym edytorze tekstu lub otworzyć w edytorze tekstu istniejący plik HTML, w którym chcemy dodać dopełnienie.

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

Krok 2: Teraz musimy umieścić kursor w znaczniku head tuż za znacznikiem tytułu dokumentu HTML, a następnie zdefiniować tag, jak pokazano w następnym bloku.

 Add the Padding in Html 

Krok 3: Teraz musimy zdefiniować właściwość dopełnienia w selektorze identyfikatora, który jest określony tuż przed tekstem, do którego chcemy dodać dopełnienie.

Poniżej znajduje się pięć różnych właściwości, na podstawie których możemy zastosować wyściółkę po każdej stronie:

I. Wypełnienie po lewej stronie:

Jeśli chcemy zastosować do elementu tylko lewe dopełnienie, musimy użyć tylko dopełnienie-lewe właściwość w selektorze identyfikatora. Następnie musimy ustawić tylko jedną wartość właściwości, jak pokazano w poniższym przykładzie:

sortowanie list Java

 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. 

Wynik powyższego kodu wykorzystującego właściwość padding-left pokazano na poniższym zrzucie ekranu:

II. Wypełnienie po prawej stronie:

Jeśli chcemy zastosować do elementu tylko prawe dopełnienie, musimy użyć tylko dopełnienie-prawe właściwość w selektorze identyfikatora. Następnie musimy ustawić tylko jedną wartość właściwości, jak pokazano w poniższym przykładzie:

 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. 

Dane wyjściowe powyższego kodu korzystającego z właściwości padding-right pokazano na poniższym zrzucie ekranu:

iii. Wyściółka górna:

Jeśli chcemy zastosować do elementu tylko górne dopełnienie, musimy użyć tylko wyściółka właściwość w selektorze identyfikatora. Następnie musimy ustawić tylko jedną wartość właściwości, jak pokazano w poniższym przykładzie:

 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. 

Wynik powyższego kodu wykorzystującego właściwość padding-top pokazano na poniższym zrzucie ekranu:

IV. Wyściółka na dole:

Jeśli chcemy zastosować do elementu tylko dolne wypełnienie, musimy użyć tylko wyściełane dno właściwość w selektorze identyfikatora. Następnie musimy ustawić tylko jedną wartość właściwości, jak pokazano w poniższym przykładzie:

 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. 

Dane wyjściowe powyższego kodu wykorzystującego właściwość padding-bottom pokazano na poniższym zrzucie ekranu:

v. Wypełnienie:

architektura sieci

Jeśli chcemy zastosować różne dopełnienie do wszystkich czterech stron (góra, dół, lewa, prawa), musimy określić cztery wartości we właściwości padding.

 padding: 10px 50px 75px 200px; 

Jeśli określimy te dwie wartości, edytor HTML zastosuje pierwsze dopełnienie u góry i u dołu, a drugie dopełnienie po lewej i prawej stronie.

 padding: 100px 50px; 

Jeśli w atrybucie dopełnienia podamy tylko wartość, wówczas edytor HTML zastosuje to samo dopełnienie do wszystkich czterech boków.

 padding: 100px; 

Przykłady właściwości dopełnienia:

Przykład 1: W poniższym przykładzie użyto jednej wartości we właściwości padding, aby ustawić to samo uzupełnienie dla wszystkich czterech stron.

 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. 

Dane wyjściowe przykładu 1 pokazano na poniższym zrzucie ekranu:

Przykład 2: W poniższym przykładzie zastosowano dwie wartości w pliku wyściółka właściwość, aby ustawić to samo wypełnienie po przeciwnych stronach.

tabela ascii w c

 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. 

Dane wyjściowe przykładu 2 pokazano na poniższym zrzucie ekranu:

Przykład 3: W poniższym przykładzie zastosowano cztery wartości właściwości padding, aby ustawić różne wypełnienie dla wszystkich czterech stron.

 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. 

Dane wyjściowe przykładu 3 pokazano na poniższym zrzucie ekranu: