Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS padding-block Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
👁️ 21 - Views
⏳ 4 mins
💬 1 Comment
CSS padding-block Property

Photo Credit to CodeToFun

🙋 Introduction

The padding-block property in CSS is a shorthand property that sets the padding area on the block start and block end sides of an element. In languages written horizontally, such as English, these correspond to the top and bottom padding.

This property is part of the CSS Logical Properties and Values specification, which provides a way to define properties in a writing-mode-independent manner.

💡 Syntax

The syntax for the padding-block property allows you to specify one or two values:

Syntax
Copied
Copy To Clipboard
element {
  padding-block: value;
}
  • One value: The same padding is applied to both the block start and block end.
  • Two values: The first value is applied to the block start, and the second value is applied to the block end.

🎛️ Default Value

The default value of the padding-block property is 0, meaning no padding is applied.

🏠 Property Values

ValueDescription
LengthA specific length value, such as 10px, 1em, 2rem, etc.
PercentageA percentage of the containing block's inline size, such as 10%.
AutoNot applicable.
InitialSets the property to its default value.
InheritInherits the property value from its parent element.

📄 Example

In this example, we'll add padding to the block start and block end sides of a div element.

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 Example</title>
  <style>
    .example {
      padding-block: 20px 40px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Block Padding</h1>
  <div class="example">
    This div has 20px padding at the block start and 40px at the block end.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The padding-block property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always advisable to test your website across different browsers to ensure compatibility, especially if your audience includes users of older browsers.

🎉 Conclusion

The padding-block property provides a convenient way to control the padding on the block start and block end sides of an element, respecting the writing mode of the document.

This property helps create more flexible and responsive designs by adjusting the layout based on the writing direction. Experiment with different padding values to see how they can enhance the visual structure of your web content.

👨‍💻 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