Internet
Fact-checked

At EasyTechJunkie, we're committed to delivering accurate, trustworthy information. Our expert-authored content is rigorously fact-checked and sourced from credible authorities. Discover how we uphold the highest standards in providing you with reliable knowledge.

Learn more...

What Is HTML Padding?

Mary McMahon
Mary McMahon
Mary McMahon
Mary McMahon

Hypertext markup language (HTML) padding is a setting a designer can use to specify the distance between content and the border of the element that contains it. This differs from the margin, which is the space between different elements. This property can be set in HTML or cascading style sheets (CSS) to affect the look and feel of a design. Some HTML padding may be aesthetically necessary to get something to look right, or it could be critical to the function of content, which might not be readable without appropriate margins.

Designers can specify the amount of padding in em, percentage, pixels, or points, depending on their preference and the nature of the project. When deciding which units to use, it is advisable to be consistent throughout the design to ensure that all the elements will work well together. If HTML padding is measured in pixels in one place, for example, it should be measured in pixels everywhere else as well.

Padding is a setting that a designer can use to set the distance between content and border elements on a web page.
Padding is a setting that a designer can use to set the distance between content and border elements on a web page.

In all cases, HTML padding tells the web browser to create blank space between the edges of the content and the border of the containing element. In a table, for example, people usually do not want text to run up right against the edge of a field, because this can make the table hard to read. They add padding to create white space around the content and make the arrangement of fields easier to see.

Designers can specify the amount of padding in em, percentage, pixels, or points, depending on their preference and the nature of the project.
Designers can specify the amount of padding in em, percentage, pixels, or points, depending on their preference and the nature of the project.

Designers can specify HTML padding for the top, bottom, and sides to tightly control the appearance of content inside containers. Additional margins can also be added between containers, if this is desired. On a blog, for instance, the author might want to create a sidebar that goes alongside the main content. Margins and borders can clearly differentiate it from the content in the blog posts. Padding can ensure that the content of the sidebar doesn’t run up against the border, which might not look very attractive.

Operating system, browser version, and monitor can all affect the way content displays on the web. Designers need to think about this when they develop web pages to ensure that the content will be readable for most web users, in order to reach the largest possible audience. Another issue to consider is what may happen if the user increases or decreases the text size. Properties like HTML padding can prevent overruns of text and other issues that might make it difficult for users to adjust font size for their vision or a mobile device.

Mary McMahon
Mary McMahon

Ever since she began contributing to the site several years ago, Mary has embraced the exciting challenge of being a EasyTechJunkie researcher and writer. Mary has a liberal arts degree from Goddard College and spends her free time reading, cooking, and exploring the great outdoors.

Learn more...
Mary McMahon
Mary McMahon

Ever since she began contributing to the site several years ago, Mary has embraced the exciting challenge of being a EasyTechJunkie researcher and writer. Mary has a liberal arts degree from Goddard College and spends her free time reading, cooking, and exploring the great outdoors.

Learn more...

Discuss this Article

Post your comments
Login:
Forgot password?
Register:
    • Padding is a setting that a designer can use to set the distance between content and border elements on a web page.
      By: Stephen VanHorn
      Padding is a setting that a designer can use to set the distance between content and border elements on a web page.
    • Designers can specify the amount of padding in em, percentage, pixels, or points, depending on their preference and the nature of the project.
      By: spaxiax
      Designers can specify the amount of padding in em, percentage, pixels, or points, depending on their preference and the nature of the project.