All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Add Padding In HTML

Last Updated : Mar 11, 2024

How To Add Padding In HTML

In this tutorial we will show you how to add padding in HTML, in HTML, padding is used to give a space around the element the element that is used here may be paragraph, image, division and any tag, inside body tag in which we want to give margin.

But some people not able to differentiate padding with margin. The difference is that here padding is used to give margin to content but from inside of its border of used elements whereas the margin is used to give margin to content from outside of its border.

Step By Step Guide On How To Add Padding In HTML :-

As, padding is used to provide margin to content from inside of its border. And also there are many ways to use padding inside a tag, but padding is always applied with the help of CSS that’s we give to opening tag by using style attribute. Here, are some ways to give padding in HTML are:

By using one padding tag, with four values

Using four values means that values given to top, right, bottom and left respectively. This sequence is always clockwise and the values may be same or different as choice.

By using one padding tag, with three values

Here, the clockwise pattern is same, but we found that there is no any value for left side. Hence, here the value in center that’s we give to right is automatically applied to left side also whereas top and bottom values are present here.

By using one padding tag, with two values

Here, only two values are given. So the first value is for top and bottom and second is for left and right respectively.

By using one padding tag, with one value

Now, in this only one value is given so that only this value is applied to all the four sides that are top, right, bottom and left.

Here we give an example of using paddings with different styles that are

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
        </head>
          <body>
	<p style="padding: 50px;">
        this is a paragraph with one value in padding tag.
    	</p>
    	<p style="padding: 30px 20px;">
        this is a paragraph with one value in padding tag.
    	</p>
    	<p style="padding: 50px 10px 90px;">
        this is a paragraph with one value in padding tag.
    	</p>
	    <p style="padding: 10px 50px 60px; 25px">
        this is a paragraph with one value in padding tag.
	    </p>
          </body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, we create four paragraph tags with padding attribute in style tag.
  5. But as you go through its values, you found that as we go down the values of padding attribute is continuously increasing and also, with above information, you also understand that what the effect of using this here is.
  6. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last, the padding is applied to all the four sides and it may be in pixel, cm, and percentage. You can apply same padding to all four sides and different to all sides also. I hope this tutorial on how to add padding in HTML helps you.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪