CSS گاپ پراپرٹی

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

ویژگی gap اندازه فضای بین ردیف و ستون در فایل‌های flexbox، شبکه یا چند ستون را تعریف می‌کند. این یک ویژگی کوتاه‌نویسی برای زیرویژگی‌های زیر است:

توجه:ویژگی gap قبلاً به عنوان grid-gap.

لطفاً ببینید:

آموزش CSS:طرح‌بندی شبکه CSS

آموزش CSS:طرح‌بندی جعبه انعطاف‌پذیر CSS

آموزش CSS:طرح‌بندی چند ستون CSS

دستورالعمل CSS:ویژگی row-gap

دستورالعمل CSS:ویژگی column-gap

مثال

مثال 1

فضای بین ردیف و ستون را به 50px تنظیم کنید:

.grid-container {
  gap: 50px;
}

آزمایش کنید

مثال 2: طرح‌بندی شبکه

در طرح‌بندی شبکه، فضای بین ردیف‌ها را به 20px و فضای بین ستون‌ها را به 50px تنظیم کنید:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

آزمایش کنید

مثال 3: طرح‌بندی جعبه انعطاف‌پذیر

در طرح‌بندی جعبه انعطاف‌پذیر، فضای بین ردیف‌ها را به 20px و فضای بین ستون‌ها را به 70px تنظیم کنید:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

آزمایش کنید

مثال 4: طرح‌بندی چند ستون

در طرح‌بندی چند ستون، فضای بین ستون‌ها را به 50px تنظیم کنید:

#newspaper {
  columns: 3;
  gap: 50px;
}

آزمایش کنید

آموزش CSS

gap: row-gap column-gap|initial|inherit;
مقدار توضیح
row-gap اندازه فضای بین ردیف‌ها در شبکه یا جعبه انعطاف‌پذیر تنظیم می‌کند.
column-gap اندازه فضای بین ستون‌ها در شبکه، جعبه انعطاف‌پذیر یا چند ستون تنظیم می‌کند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. ببینید: inherit.

جزئیات فنی

مقدار پیش‌فرض: normal normal
وراثت: خیر
انیمیشن‌سازی: پشتیبانی می‌شود. لطفاً به ویژگی‌های جداگانه نگاه کنید. ببینید:ویژگی‌های مرتبط با انیمیشن.
نسخه: مодуل هم‌ترازی جعبه CSS سطح 3
آموزش جاوااسکریپت: object.style.gap="50px 100px"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبانی‌کننده از این ویژگی هستند.

طرح‌بندی چروم آئی ای / ایج فائرفاکس سافری اوپرا
در گرید 66 16 61 12 53
در جعبه انعطاف‌پذیر 84 84 63 14.1 70
در چند ستون 66 16 61 پشتیبانی نمی‌شود 53