Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS padding-inline Property

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

Photo Credit to CodeToFun

🙋 Introduction

The padding-inline property in CSS is a shorthand property that sets the padding for the inline start and inline end edges of an element. Unlike traditional padding properties, which are based on the physical left and right sides of an element, padding-inline is logical and adapts to the text direction of the document. This makes it particularly useful for internationalization, as it automatically adjusts for languages that read from right to left.

💡 Syntax

The syntax for the padding-inline property allows you to set the padding for the inline start and end in one declaration. You can use either one or two values.

Syntax
Copied
Copy To Clipboard
element {
  padding-inline: value;
}

element {
  padding-inline: start-value end-value;
}
  • Single Value: Sets the same padding for both inline start and inline end.
  • Two Values: Sets start-value for the inline start and end-value for the inline end.

🎛️ Default Value

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

🏠 Property Values

ValueDescription
LengthSpecifies the padding in fixed units like px, em, rem, etc.
PercentageSpecifies the padding as a percentage of the containing block's inline size.
AutoAutomatically calculates the padding (rarely used in practice).
InitialSets the property to its default value.
InheritInherits the value from its parent element.

📄 Example

In this example, we'll set the padding for an element using the padding-inline property.

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-inline Example</title>
  <style>
    .example {
      padding-inline: 20px 10px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h1>Box with Inline Padding</h1>
  <div class="example">
    This box has 20px padding at the start and 10px padding at the end.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The padding-inline property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For the best user experience, especially when supporting international audiences, it is recommended to test the property across different browsers and devices.

🎉 Conclusion

The padding-inline property is a versatile tool for web developers who need to manage the layout of elements in a way that respects text direction and internationalization.

By using logical properties like padding-inline, you can create more adaptable and user-friendly designs that work well in various language contexts. Experiment with different padding values to see how they can improve the layout and readability of your 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