CSS padding-block Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 35 - Views

⏳ 4 mins

💬 1 Comment

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

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

Value	Description
Length	A specific length value, such as 10px, 1em, 2rem, etc.
Percentage	A percentage of the containing block's inline size, such as 10%.
Auto	Not applicable.
Initial	Sets the property to its default value.
Inherit	Inherits 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

<!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.