Login With Github

CSS Padding

The CSS Padding property defines the space between the element's border and the element's content.The padding (top, right, bottom, left) can be set on all four sides of the element.

CSS Padding Property

The padding property values accept length or percentage values, but negative values are not allowed.

The following diagram shows the relationship between the padding and the margin, and the red line is the border of the element.

For example, you can set the padding of all <h1> elements to 10px:

h1 {
    padding: 10px;
}

You can also set the padding of each side in the order of top, right, bottom, and left, for example:

h2 {
    padding: 20px 30px 30px 20px;
}

Individual Sides

You can use the following CSS properties to set the four sides of padding respectively:

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

You can use these four properties together in a CSS rule, for example:

h2 {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 20px;
}

You can also use the padding property to set four side padding at the same time:

h2 {
    padding: 20px 30px 30px 20px;
}

Value Copy

The padding value copy and the margin value copy have the same principle. You can refer to CSS Margins.

padding:25px 50px 75px 100px;

  • padding-top is 25px
  • padding-right is 50px
  • padding-bottom is 75px
  • padding-left is 100px

padding:25px 50px 75px;

  • padding-top is 25px
  • padding-right and padding-left are 50px
  • padding-bottom is 75px

padding:25px 50px;

  • padding-top and padding-bottom are 25px
  • padding-right and padding-left are 50px

padding:25px;

  • padding-top,padding-right,padding-bottom and padding-left are all 25px.

Padding and Element Width

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).

So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

In the following example, the <div> element is given a width of 300px. However, the actual rendered width of the <div> element will be 350px (300px + 25px of left padding + 25px of right padding):

div {
    width: 300px;
    padding: 25px;
}

To keep the width at 300px, no matter the amount of padding, you can use the box-sizing property. This causes the element to maintain its width; if you increase the padding, the available content space will decrease. Here is an example:

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

1 Comment

temp

qqwwqwqwv wcccccccccccccccccccccccccccccccccccccccwf wf wf wfffffffffffwc efewf wf wfc w  df sfds s s sdf s s