ویژگی padding-inline-start CSS

صفحه قبل padding-inline-end
صفحه بعدی padding-left

تعریف و استفاده

عنصر padding-inline-start ویژگی‌ها به فضایی اشاره دارند که از لبه تا محتوای عنصر در جهت خطی شروع است.

CSS padding-inline و padding-block ویژگی‌ها با ویژگی‌های CSS padding-top،padding-bottom،padding-left و padding-right بسیار مشابه هستند، اما padding-inline و padding-block ویژگی‌ها وابسته به جهت خطی و جهت بلوک هستند.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode و direction تعریف می‌کند جهت خطی. این تأثیرگذار بر موقعیت شروع و پایان عنصر در جهت خطی است و padding-inline-start نتیجه ویژگی. برای صفحات انگلیسی، جهت بلوک به سمت پایین است و جهت خطی از چپ به راست است.

مثال

مثال 1

در ابتدای جهت خطی پادینگ درونی تنظیم می‌شود:

div {
  padding-inline-start: 50px;
}

آزمایش کنید

مثال 2

عنصر <div> را writing-mode وقتی مقدار ویژگی به vertical-rl تنظیم شود، جهت خطی به سمت پایین است. نتیجه این است که موقعیت شروع عنصر از سمت چپ به سمت بالا حرکت می‌کند:

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

آزمایش کنید

مثال 3

عنصر <div> را direction وقتی مقدار ویژگی به rtl تنظیم شود، جهت خطی در جهت خطی است. نتیجه این است که موقعیت شروع عنصر از سمت چپ به سمت راست حرکت می‌کند:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

آزمایش کنید

آموزش نحوی CSS

padding-inline-start: auto|value|مقدار اولیه|ارث‌پذیری;

مقدار ویژگی

مقدار	توضیح
خودکار	پیش‌فرض
length	مقدار فاصله را مشخص کنید که با واحد px، pt، cm و غیره مشخص شده است. مقدار منفی مجاز نیست. لطفاً به:واحدهای CSS.
%	مقدار درصدی را مشخص کنید که این ویژگی در جهت خطی پدر نسبت به اندازه خود دارد.
مقدار اولیه	این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مقدار اولیه.
ارث‌پذیری	این ویژگی را از عنصر پدر خود ارث می‌برد. به: ارث‌پذیری.

جزئیات فنی

مقدار پیش‌فرض:	خودکار
ارث‌پذیری:	خیر
انیمیشن‌سازی:	پشتیبانی شده است. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه:	CSS3
آموزش نحوی جاوااسکریپت:	object.style.paddingInlineStart="100px"