CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2


CSS - Padding

The padding property allows you to specify how much space should appear between the content of an element and its border .

There are properties for setting the padding for each side of an element (top, right, bottom, and left).

You can set following padding properties −

  • padding-top :The padding-top specifies the top padding of an element.
  • padding-right : The padding-right specifies the right padding of an element.
  • padding-bottom : The padding-bottom specifies the bottom padding of an element.
  • padding-left : The padding-left specifies the left padding of an element.
  • The padding serves as shorthand for the preceding properties.
  • All the padding properties can have the following values:

  • length - specifies a padding in px, pt, cm, etc.
  • % - specifies a padding in % of the width of the containing element

  • Example : CSS - Paddings

    <!DOCTYPE html>
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 100px;
    padding-bottom: 150px;
    padding-left: 200px;
    <h3>Code Always To Become Best Programmer.</h3>
    <p>Code Always <p>

    When the above code is compiled , it produces the following result.


    You can set CSS padding properties inline, internal and external way of using CSS in your HTML page.