از ویژگی column-rule برای تعیین خطی بین ستون های چیدمان چندستونی استفاده می شود. این ویژگی از نوع ویژگی های مختصرنویسی است که مقادیر ویژگی های column-rule-width، column-rule-style و column-rule-color را در یک اعلان تعیین می کند.
این خط یا همان Rule تا حدودی شبیه به border است که بین ستون ها قرار می گیرد و حتی می توان استایل این خط را نیز شبیه به استایل های حاشیه یک عنصر تغییر داد.
این خط تنها بین ستون ها رسم می شود این یعنی قبل از اولین ستون و بعد از آخرین ستون رسم نخواهد شد.
این خط هیچ فضایی اشغال نمی کند، یعنی اندازه فاصله بین ستون ها (column-gap) را تحث تاثیر قرار نمی دهد و وسط آن فضا رسم می شود.
مقادیر ویژگی column-rule
column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
مقدار اولیه و پیشفرض این ویژگی 0 solid currentColor می باشد.
به عنوان نمونه:
column-rule: 1em dotted #ddd;
برابر با بلاک زیر است:
column-rule-width: 1em;
column-rule-style: dotted;
column-rule-color: #ddd;
برای بررسی سه ویژگی گفته شده به مطالب مربوط به آنها مراجعه کنید.
مثال
در دموی زیر این ویژگی را بررسی کنید:
See the Pen column-rule by Mojtaba Seyedi (@seyedi) on CodePen.
سوال داری؟ برو به پنل پرسش و پاسخ