CSS padding-inline-end Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The padding-inline-end property in CSS is used to define the padding at the end of an element's inline direction.

This property is part of the logical properties in CSS, which allows for more flexible layouts that can adapt to different writing modes, such as left-to-right (LTR) or right-to-left (RTL) text directions.

💡 Syntax

The syntax for the padding-inline-end property is simple. You can specify the padding using any valid CSS length value, including pixels, ems, percentages, etc.

Syntax

Copied

element {
  padding-inline-end: value;
}

Here, value can be a length (e.g., 10px, 1em, 5%) or a keyword like auto or inherit.

🎛️ Default Value

The default value of the padding-inline-end property is 0. This means that if no value is specified, there will be no padding applied at the end of the inline direction.

🏠 Property Values

Value	Description
length	Specifies a fixed padding, such as 10px, 1em, 5%, etc.
auto	The browser calculates the padding.
inherit	Inherits the padding value from the parent element.
initial	Sets the property to its default value.
unset	Resets the property to its natural value.

📄 Example

In this example, we'll apply padding-inline-end to a paragraph element to add padding to the end of the inline direction.

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-inline-end Example</title>
  <style>
    p {
      padding-inline-end: 20px;
      background-color: lightgrey;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Inline-End Padding</h1>
  <p>This paragraph has a padding at the inline end. Resize the window to see the effect.</p>
</body>
</html>

🖥️ Browser Compatibility

The padding-inline-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-inline-end property is a useful tool for web developers looking to create flexible and adaptable layouts.

By using logical properties like padding-inline-end, you can ensure that your designs work well in different writing modes and text directions. Experiment with different values and see how this property can enhance the layout and readability of your web projects.