Welcome Guest! (App Version 3.1)

websitnero logo name

HTML Padding

Overview

  • Padding is the space an element reserves to the content added inside it.
  • If padding goes 0px -- it means the data written inside element will collied to the border of the element and UI will look dirty if border is visible.

Padding of an HTML Element

Padding provides a gap between outermost boundary of an HTML element and the main content inside it.

By providing some value to padding, we make sure that the content does not collide with the outermost boundary and UI of the element looks good.

If we do not provide any padding or set padding to 0 px, then the content will collide with the border of that element and UI will look ugly.

<div style="padding:5px 10px"> ... </div>

Example

<head>
<style>
.p1 {
  border:2px solid black; 
  padding:10px;
}
.p2 {
  border:2px solid black; 
  padding:50px;
}
</style>
</head>

<body>
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
</body>
Further Reading

1. Padding

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.