Home > Article > Web Front-end > HTML Padding
HTML Padding
- PHPzOriginal
- 2024-09-04 16:50:10927browse
Generally, Padding is the space between the things for anything, the same as in the HTML refers to the space between the HTML contents and its borders. The HTML padding is also a property for using the web pages more attractively and highlighting the websites. It also some types like padding-top, padding-left, padding-right, padding-bottom, etc. We can align the words or text in similar type padding formats. The Padding creates extra spaces within the HTML elements, and the also margin creates extra space for the HTML elements. We also use the CSS styles and their properties for all the padding areas.
Syntax:
Each HTML tag has its attributes and properties of the elements. Likewise, syntax also differs, and they will use for all of the other HTML tags if the user requirements need. Below is the basic syntax of the padding elements in HTML.
<html>
<head>
<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>
</head>
<body>
</body>
</html>
The above syntax helps create the sample web page and will use the padding styles in the CSS styles for the head section in HTML. Based on that, the syntax will vary if we use it in the other sections and tags in the HTML.
How does Padding work in HTML?
Compared to margin, Padding is the extra space created inside some HTML elements, but the margin is made outside the HTML elements. Each element, like Padding and margin, refers to the box models that are Padding, margins, and borders all combined with the box models of the HTML containers. In that model, the middle portions of the areas used for HTML content, that is, text or images, videos, etc., surround with some padding, margins, and borders if the user needs customized development in the web pages.
We won’t use all these as necessary, but it’s beneficial to remember the box model is applied to every tag or element on the web pages. Some CSS styles and properties allow a string of values that is replaced with the number of properties, and they are represented with values separated by using spaces.
The Padding in the box with inside margins and borders areas and outside the HTML contents area, padding property, is used to specify the uniform padding style in the box container. Three or foursome values are specified independently based on our declaration in the codes with client requirements.
When calculating the lengths for Padding, there are certain permissible values to consider, ensuring they are not negative; also, calculate the percentage that includes the box width and height and does not have the negative values. We can use Padding on the image side for the web pages in HTML with the help of creating buffers between the images and the data streams like HTML content. It gives the images like little breathing room, so they aren’t jammed in either text or other images.
We typically position the images on the left side of the web pages, closely attaching the data content. There is no distractingly close to the pictures. Still, when using the same images in the right panel, the Padding creates a buffer between the images and the text; it will be helpful for a pleasant reading experience from the user’s perspective. We can also add Padding in the image canvas using edit operations like an HTML editor with some style attributes and switch to the rich text editors after the user selects the images.
We add selective Padding, such as a 10-pixel border, to all sides of the images that we select or upload as image contents to the web pages based on user or client instructions; also, we can add the Padding selectively by using some padding styles like the padding-bottom option to padding-right based on the user requirements.
4 Padding Values
We can use Padding in javascript functions to create and resize the border styles or padding styles automatically after calling the javascript functions in the HTML codes. Generally, the padding property sets or returns the Padding of the HTML elements that the property takes from a single value up to four values; we will discuss each padding value below.
- Single value: Example like div{padding:12px}-all four sides of the HTML contents will have a padding value like 12 px.
- Two values: div{padding:12px 13px}-the top and bottom Padding will be 12px, and the left and right paddings will be 13px.
- Three values: div{padding:12px 13px 14px}-the top Padding will be 10px, the left and right Padding will be 13px, and the bottom Padding will be 14px.
- Four values: div{padding:12px 13px 14px 15px}-top Padding is 12px, right Padding is 13px, bottom Padding is 14px, and the left Padding will be 15px.
Examples of HTML Padding
The examples of HTML Padding are given below:
Example #1
Code:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>
Output:
Example #2
Code:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>
Output:
Example #3
Code:
<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>
</body>
</html>
Output:
The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.
Conclusion
We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.
The above is the detailed content of HTML Padding. For more information, please follow other related articles on the PHP Chinese website!