To include padding in an HTML document using Internal CSS, we need to adhere to the following guidelines. By following these straightforward instructions, we can effortlessly incorporate padding.
To begin, the initial step involves entering the HTML code into a text editor or accessing the current HTML file in the preferred text editor where the padding needs to be incorporated.
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Padding in Html
</Title>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
The text on which we want to add padding.
</Body>
</Html>
In the second step, it is necessary to position the cursor within the head tag immediately following the title tag of the HTML document. Subsequently, the <style> tag should be specified in the manner demonstrated in the subsequent code block.
<Head>
<Title>
Add the Padding in Html
</Title>
<style>
</style>
</Head>
Step 3: Next, it is necessary to specify the padding property within the ID selector that precedes the content requiring padding.
Here are five distinct properties that can be utilized to apply padding on all sides:
i. Padding-left:
To exclusively add left padding to an element, the padding-left property should be utilized within the id selector. It is necessary to assign a single value to this property, as illustrated below:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the left Padding in Html
</Title>
<style>
div {
border: 3px solid blue;
padding-left: 75px;
background-color: yellow;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
The text on which we add the 75pixel left padding.
</div>
</Body>
</Html>
The result displayed in the screenshot below illustrates the outcome of the aforementioned code snippet that utilizes the padding-left attribute:
ii. Padding-right:
To exclusively add padding to the right side of an element, the padding-right property within the ID selector should be utilized. Singularly assigning a value to this property is demonstrated in the example below:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the right Padding in Html
</Title>
<style>
div {
border: 3px solid blue;
padding-right: 250px;
background-color: yellow;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
The text on which we add the 250pixel right padding.
</div>
</Body>
</Html>
The result of the code snippet above, utilizing the padding-right attribute, is displayed in the screenshot below:
iii. Padding Top:
To exclusively add padding to the top of an element, the padding-top property should be utilized within the ID selector. It is necessary to assign a single value to this property, as illustrated in the example below:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Top Padding in Html
</Title>
<style>
div {
border: 3px solid orange;
padding-top: 25px;
background-color: green;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
The text on which we add the 25pixel top padding.
</div>
</Body>
</Html>
The result of the preceding code snippet, utilizing the padding-top attribute, is displayed in the screenshot below:
iv. Padding Bottom:
To exclusively add bottom padding to an element, the padding-bottom property should be utilized within the id selector. A single value must be assigned to this property, as illustrated in the example below:
<!Doctype Html>
<Html>
<Head>
<Title>
Add the Bottom Padding in Html
</Title>
<style>
div {
border: 3px solid orange;
padding-bottom: 250px;
background-color: green;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
The text on which we add the 250pixel bottom padding.
</div>
</Body>
</Html>
The result of the preceding code snippet that utilizes the padding-bottom attribute is illustrated in the screenshot below:
v. Padding:
To set varying padding on all four sides (top, bottom, left, right), it is necessary to define all four values within the padding property.
padding: 10px 50px 75px 200px;
When two values are specified, the HTML editor will apply the first value for padding to the top and bottom, and the second value for padding to the left and right.
padding: 100px 50px;
When only a single value is defined in the padding property, the HTML editor will uniformly apply this padding to all four sides of the element.
padding: 100px;
Examples of Padding Property:
In this instance, a single value is applied in the padding attribute to establish identical padding for each of the four sides simultaneously.
<!Doctype Html>
<Html>
<Head>
<Title>
Set one value to apply same padding
</Title>
<style>
div {
border: 3px solid gray;
padding: 100px;
background-color: orange;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
The text on which we set the 100pixel padding to all the four side.
</div>
</Body>
</Html>
The screenshot below displays the result of example 1:
Illustration 2: In this instance, a pair of values are employed within the padding attribute to establish identical padding for opposing sides.
<!Doctype Html>
<Html>
<Head>
<Title>
Specify two value to apply same padding on opposite sides
</Title>
<style>
div {
border: 3px solid black;
padding: 100px 50px;
background-color: gray;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side.
</div>
</Body>
</Html>
The screenshot below displays the result of example 2:
Illustrative Example 3: In this instance, the padding property is employed with four values to specify distinct padding for each of the four sides.
<!Doctype Html>
<Html>
<Head>
<Title>
Specify four value to apply different padding on opposite sides
</Title>
<style>
div {
border: 3px solid blue;
padding: 10px 50px 75px 200px;
background-color: red;
}
</style>
</Head>
<Body>
Hello User!...
You are at C# Tutorial Site...
<div>
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.
</div>
</Body>
</Html>
The screenshot below displays the result of executing example 3: