CSS padding-block-end Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 24 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The padding-block-end property in CSS is part of the Logical Properties and Values specification. It sets the padding on the block-end side of an element, which corresponds to the bottom padding in a left-to-right (LTR) writing mode and the top padding in a right-to-left (RTL) writing mode.

This property is useful for creating layouts that adapt to different writing modes, such as those used for different languages.

💡 Syntax

The syntax for the padding-block-end property is straightforward. You can specify the padding value using units like pixels, ems, percentages, etc.

Syntax

Copied

element {
  padding-block-end: value;
}

Here, value can be a length, percentage, or the keyword auto.

🎛️ Default Value

The default value of the padding-block-end property is 0, which means there is no padding applied.

🏠 Property Values

Value	Description
length	A fixed value such as 10px, 1em, 2rem, etc.
percentage	A percentage of the containing block's size, such as 5%.
auto	The browser calculates the padding automatically.

📄 Example

In this example, we'll set the padding-block-end property to add padding at the bottom of a paragraph.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS padding-block-end Example</title>
  <style>
    p {
      padding-block-end: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Padding Block End</h1>
  <p>This paragraph has 20px of padding at the block-end, which is at the bottom in this writing mode.</p>
</body>
</html>

🖥️ Browser Compatibility

The padding-block-end property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The padding-block-end property provides a flexible way to control the padding at the block-end side of an element, adapting to different writing modes and text directions.

It is especially useful for creating multilingual websites where the layout needs to respond to various text orientations. Experiment with this property to achieve consistent and responsive design across different languages and devices.