Internal CSS を使用して Html ドキュメントにパディングを追加したい場合は、以下に示す手順に従う必要があります。これらの簡単な手順を使用して、パディングを簡単に追加できます。

ステップ1： まず、テキスト エディターに HTML コードを入力するか、パディングを追加する既存の HTML ファイルをテキスト エディターで開く必要があります。

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

ステップ2： 次に、HTML ドキュメントの title タグの直後の head タグにカーソルを置き、 次のブロックに示すようにタグを追加します。

 Add the Padding in Html  

ステップ 3: ここで、パディングを追加するテキストの直前に指定される ID セレクターでパディングのプロパティを定義する必要があります。

以下は、各側にパディングを適用できる 5 つの異なるプロパティです。

私。左パディング:

要素に左パディングのみを適用したい場合は、のみを使用する必要があります。 パディング左 ID セレクターのプロパティ。そして、次の例に示すように、プロパティに値を 1 つだけ設定する必要があります。

 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 プロパティを使用する上記のコードの出力を示しています。

ii.右パディング:

要素に右パディングのみを適用したい場合は、のみを使用する必要があります。 右パディング ID セレクターのプロパティ。そして、次の例に示すように、プロパティに値を 1 つだけ設定する必要があります。

 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 プロパティを使用する上記のコードの出力を示しています。

iii.パディングトップ:

要素に上部のパディングのみを適用したい場合は、のみを使用する必要があります。 パディングトップ ID セレクターのプロパティ。そして、次の例に示すように、プロパティに値を 1 つだけ設定する必要があります。

 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 プロパティを使用する上記のコードの出力を示しています。

iv.下部のパディング:

要素に下部パディングのみを適用したい場合は、のみを使用する必要があります。 パディングボトム ID セレクターのプロパティ。そして、次の例に示すように、プロパティに値を 1 つだけ設定する必要があります。

 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 プロパティを使用する上記のコードの出力を示しています。

v. パディング:

4 つの辺 (上、下、左、右) すべてに異なるパディングを適用したい場合は、padding プロパティで 4 つの値を指定する必要があります。

 padding: 10px 50px 75px 200px;  

2 つの値を指定すると、HTML エディターは最初のパディングを上下に適用し、2 番目のパディングを左右に適用します。

 padding: 100px 50px;  

パディング属性に値のみを指定すると、HTML エディターは 4 つの辺すべてに同じパディングを適用します。

 padding: 100px;  

パディングプロパティの例:

例 1: 次の例では、padding プロパティの 1 つの値を使用して、4 辺すべてに同じパディングを設定します。

 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.  

例 1 の出力を次のスクリーンショットに示します。

例 2: 次の例では、 パディング プロパティを使用して、反対側に同じパディングを設定します。

 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.  

例 2 の出力を次のスクリーンショットに示します。

例 3: 次の例では、padding プロパティの 4 つの値を使用して、4 つの辺すべてに異なるパディングを設定します。

 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.  

例 3 の出力を次のスクリーンショットに示します。