CSS Padding



CSS Tutorial  >  Padding

As we saw from the box model, padding is the space just outside the content area, and just inside the border area. In a box, there are four sides. So, we can specify paddings up to the 4 sides:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

    A fifth property, padding, is used as a shortcut for the above four properties.

    Paddings can be specified in two ways: length and percentage. If no value is specified, the default is 0. It is important to note that no negative values can be used for padding.

    Example 1

    CSS declaration:

    #container1 {
      padding-top:15px;
      padding-left:5px;
      padding-right:100px;
      padding-bottom:40px;
      border: 1px solid 000000;
    }

    The following HTML,

    <div id="container1">
    Example of CSS padding using length
    </div>

    renders the following:

    Example of CSS padding using length

    Notice the padding between the text and the top, left, bottom, and right of the light green area are 15px, 5px, 40px, and 100px, respectively.

    Example 2

    CSS declaration:

    #container2 {
      padding-top:15%;
      padding-left:5%;
      padding-right:30%;
      padding-bottom:20%;
      border: 1px solid 000000;
    }

    The following HTML,

    <div id="container2">
    Example of CSS padding using percentage
    </div>

    renders the following:

    Example of CSS padding using percentage

    Notice the padding between the text and the top, left, bottom, and right of the light green area are 15%, 5%, 20%, and 30% of the width, respectively. When using percentage with padding in this way, the percentage is expressed in terms of the width, not the height, of the box.

    Padding order

    All four paddings can be specified on a single line using the "padding" property. The syntax is as follows:

    padding: [padding-top] [padding-right] [padding-bottom] [padding-left]

    The order is very important here. The first element is always the top padding, the second is always the right padding, the third is always the bottom padding, and the fourth is always the left padding. If this seems hard to memorize, just remember that you start from the top and go clockwise.

    When only three values are specified, the first value refers to the top padding, the second value refers to the left padding and the right padding, and the third value refers to the bottom padding.

    When only two values are specified, the first value refers to the top padding and the bottom padding, and the second value refers to the left padding and the right padding.

    When only one value is specified, it refers to all four sides.

    Example 3

    CSS declaration:

    #container3 { padding: 15px 2em 30px 5%; }

    means #container3 has the following properties:

    • padding-top: 15px
    • padding-right: 2em
    • padding-bottom: 30px
    • padding-left: 5%

    Note here that it is permissible to specify values in both legnth and percentage in the same padding declaration.

    Example 4

    CSS declaration:

    #container4 { padding: 30px 10em 20px; }

    means #container4 has the following properties:

    • padding-top: 30px
    • padding-right: 10em
    • padding-bottom: 20px
    • padding-left: 10em

    Example 5

    CSS declaration:

    #container5 { padding: 10px 5px; }

    means #container5 has the following properties:

    • padding-top: 10px
    • padding-right: 5px
    • padding-bottom: 10px
    • padding-left: 5px

    Example 6

    CSS declaration:

    #container6 { padding: 30em; }

    means #container6 has the following properties:

    • padding-top: 30em
    • padding-right: 30em
    • padding-bottom: 30em
    • padding-left: 30em

    List of padding properties

    PropertyUsage
    paddingSpecifies the amount of padding on all four sides of an element
    padding-bottomSpecifies the bottom padding of an element
    padding-leftSpecifies the left padding of an element
    padding-rightSpecifies the right padding of an element
    padding-topSpecifies the top padding of an element

    Next: CSS padding-bottom Property




    Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact
  • AdBlock Detected!

    Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.