ویژگی row-gap CSS
تعریف و استفاده
ویژگی row-gap تعیین فضای بین سطرهای طرح‌بندی جعبه انعطاف‌پذیر یا شبکه است.
ویژگی row-gap قبلاً به عنوان grid-row-gap.
لطفاً به:
آموزش CSS:طرح‌بندی شبکه CSS
آموزش CSS:طرح‌بندی جعبه انعطاف‌پذیر CSS
دستورالعمل مرجع CSS:ویژگی gap
دستورالعمل مرجع CSS:ویژگی column-gap
مثال
مثال 1
فضای 50 پیکسلی بین سطرهای شبکه را تعیین می‌کنیم:
#grid-container {
display: grid;
row-gap: 50px;
}
مثال 2: طرح‌بندی جعبه انعطاف‌پذیر
در طرح‌بندی جعبه انعطاف‌پذیر، فضای بین سطرها را به 70px تنظیم می‌کنیم:
#flex-container {
display: flex;
row-gap: 70px;
}
قوانین CSS
row-gap: length|normal|initial|inherit;
| مقدار | توضیح |
|---|---|
| length | تعیین طول مشخص یا درصد مشخص برای فضای بین سطرها. |
| normal | مقدار پیش‌فرض. تعیین فضای معمول بین سطرها. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial. |
| inherit | این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | normal |
|---|---|
| ارث: | خیر |
| انیمیشن‌سازی: | پشتیبانی می‌شود. لطفاً به ویژگی‌های جداگانه مراجعه کنید. به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | مодуل هماهنگی جعبه CSS سطح 3 |
| قوانین جاوااسکریپت: | object.style.rowGap="50px" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبانی‌کننده از این ویژگی هستند.
| طرح‌بندی | Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| در شبکه | 66 | 16 | 61 | 12 | 53 |
| در جعبه انعطاف‌پذیر | 84 | 84 | 63 | 14.1 | 70 |
