Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS padding-block-end Property

Posted in CSS Tutorial
Updated on Jul 25, 2024
By Mari Selvan
👁️ 8 - Views
⏳ 4 mins
💬 1 Comment
CSS padding-block-end Property

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
Copy To Clipboard
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

ValueDescription
lengthA fixed value such as 10px, 1em, 2rem, etc.
percentageA percentage of the containing block's size, such as 5%.
autoThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy