Languages
[Edit]
EN

CSS - padding

3 points
Created by:
Elmer-Li
396

In this article, we would like to show you how to add padding for any HTML element using CSS.

Quick solution:

div {
    padding: 5px;
}

or

div {
    padding: 5px 10px 15px 20px;
}
Element padding clockwise direction concept.
Element padding clockwise direction concept.

 

The padding can use different units:

  • units such as px, empt, cm, etc.
  • % - that specifies the padding in % of the width of the containing element.

 

Practical example

In this example, we set the padding to 10px in every direction using a single value.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .my-element {
        padding: 40px;  /* 40px for top, right, bottom and left */
        background: orange;
        display: inline-block;
    }

  </style>
</head>
<body>
  <div class="my-element">content</div>
</body>
</html>

Result:

CSS - padding example
CSS - padding example

Specify padding for each side of the element

In this section, we specify individual values for each side of the div element.

div {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 60px;
    padding-left: 100px;
}

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .my-element {
        padding-top: 10px;
        padding-right: 30px;
        padding-bottom: 60px;
        padding-left: 100px;
        background: orange;
        display: inline-block;
    }

  </style>
</head>
<body>
  <div class="my-element">content</div>
</body>
</html>

Shorthand:

.my-element {
    padding: 10px 30px 60px 100px;  /* padding: top right bottom left;  */
}

Note:

The shorthand for padding property is specified clockwise.

Practical example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .my-element {
        padding: 10px 30px 60px 100px;  /* padding: top right bottom left;  */
        background: orange;
        display: inline-block;
    }

  </style>
</head>
<body>
  <div class="my-element">content</div>
</body>
</html>
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join