padding-block-end

Definition

padding-block-end is a CSS property that specifies the amount of padding to be applied to the bottom (i.e. end) edge of an element's content box in the block dimension. It affects the block-axis layout of an element and is commonly used to create space between an element's content and its border or surrounding elements.

Examples

Setting padding-block-end to 20px:

.example {
  padding-block-end: 20px;
}

Setting padding-block-end to a percentage value:

.example {
  padding-block-end: 5%;
}

Using shorthand notation to set padding on all sides, including padding-block-end:

.example {
  padding: 10px 20px 30px 40px;
}

Inheriting padding-block-end from a parent element:

.parent {
  padding-block-end: 20px;
}

.child {
  /* Inherits padding-block-end from parent */
}

Overriding inherited padding-block-end:

.parent {
  padding-block-end: 20px;
}

.child {
  /* Overrides inherited padding-block-end with 10px */
  padding-block-end: 10px;
}

Values

Best Practices

• Use shorthand property: Instead of using padding-block-end alone, it's best to use the shorthand property padding-block which combines padding-block-start, padding-block-end, padding-inline-start, and padding-inline-end. This helps reduce the amount of code you need to write and makes it easier to read and maintain your CSS.
• Use relative units: When setting the value of padding-block-end, it's best to use relative units like ems, rems, or percentages instead of absolute units like pixels. This helps ensure that your layout is responsive and adapts well to different screen sizes and resolutions.
• Consider the box model: Remember that padding-block-end adds space inside the box model of an element, which can affect the size and position of other elements on the page. Be mindful of this when setting padding-block-end values to avoid unwanted layout changes.
• Use a consistent value: It's generally a good idea to use a consistent value for padding-block-end throughout your site or application. This can help create a sense of continuity and make your layout look more polished.
• Be mindful of overflow: If the content of an element is taller than the containing block, adding padding-block-end can cause the content to overflow and hide behind other elements. Be sure to test your layout with various content lengths to avoid this issue.

Browser Compatibility