column-gap Property
ویژگی column-gap
در CSS فاصله بین ستون های محتوای عنصرِ مورد نظر را مشخص می کند.
نحوه نوشتار
column-gap: normal; column-gap: 15px; column-gap: 3rem; column-gap: 7%;
مقادیر
normal
فاصله نرمال را مابین ستون های محتوا در نظر می گیرد. این فاصله 1em در نظر گرفته شده و مقدار پیشفرض است.
طول
فاصله بین ستون ها با واحدهای اندازه CSS تعیین می شود. این مقدار نباید منفی باشد.
درصد
فاصله بین ستون ها با معیار درصد تعیین می شود. این مقدار نباید منفی باشد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم.
html
<p class="pg1"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p> <hr /> <p class="pg2"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p> <hr /> <p class="pg3"> لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. </p>
css
body { direction: rtl; font-family: "Segoe UI"; } p { padding: 15px; margin-top: 20px; text-align: justify; } .pg1 { column-count: 2; column-gap: 4.5em; } .pg2 { column-count: 3; column-gap: 10%; } .pg3 { column-count: 4; column-gap: auto; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.