ویژگی gap CSS

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

ویژگی gap اندازه فاصله بین ردیف و ستون در قابلیت انعطاف‌پذیری، شبکه یا چند ستون را تعریف می‌کند. این یک کوتاه‌نویسی از ویژگی‌های زیر است:

توجه داشته باشید:ویژگی 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"

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

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

طرح‌بندی Chrome IE / Edge Firefox Safari Opera
در شبکه 66 16 61 12 53
در قابلیت انعطاف‌پذیری 84 84 63 14.1 70
در چند ستون 66 16 61 پشتیبانی نمی‌شود 53