آموزش ویژگی border-spacing در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی border-spacing در CSS با من همراه باشید.

آموزش ویژگی border-spacing در CSS

Free-Learn

ویژگی border-spacing در CSS

با استفاده از ویژگی border-spacing در CSS میتوان یک فضای خالی ( فاصله ) را در اطراف سلول های یک جدول ایجاد و یا تعریف کرد.

این ویژگی فقط در صورتی عمل میکند که مقدار ویژگی border-collapse برابر باشد با separate ، در غیراینصورت این ویژگی عمل نخواهد کرد.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی border-spacing را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از واحد اندازه گیری پیکسل ( PX )

امتحان کنید

مثال شماره ۲ : استفاده از ۲ مقدار بصورت همزمان ( مقدار اول میزان فضای خالی را در موقعیت افقی و مقدار دوم در موقعیت عمودی را مشخص میکند )

امتحان کنید

Free-Learn

جدول مشخصات ویژگی border-spacing در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض ۲px
قابل ارث بری دارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS2
نحوه استفاده در جاوااسکریپت oobject.style.borderSpacing=”5px”;

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی border-spacing در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
border-spacing ۱٫۰ ۱٫۰ ۴٫۰ ۱٫۰ ۸٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی border-spacing در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
length length یعنی شما میتونید از واحدهای اندازه گیری مثه px,pt,cm و.. استفاده نمایید.
استفاده از مقادیر منفی مثله ( ۲۰px- ) مجاز نیست و کار نمیکند.
اگر از ۱ مقدار استفاده نمایید بصورت خودکار هم بصورت افقی و هم عمودی محاسبه میشه
اگر از ۲ مقدار استفاده نمایید مقدار اول برای موقعیت افقی و مقدار دوم عمودی .
( آموزش واحدهای اندازه گیری )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی تنها در صورتی عمل خواهد کرد که شما از ویژگی border-collapse با مقدار separate استفاده کرده باشید.

این ویژگی بصورت همزمان ۲ مقدار هم میتواند بپذیرد، مقدار اولی میزان فضای خالی ( فاصله ) را بصورت افقی محاسبه میکند و مقدار دوم میزان فضای خالی ( فاصله ) را بصورت عمودی محاسبه میکند.

Free-Learn

دریافت PDF یا پرینت این مطلب