فاصله حاشیه بیرونی (Outline Offset)
«فاصله حاشیه بیرونی (Outline Offset)» یعنی فاصله بین «Outline» و لبه عنصر. «Outline» خط بیرونی است؛ خارج از «Border». این فاصله شفاف است، پس محتوا را نمی پوشاند.
تعریف ساده outline-offset
ویژگی «outline-offset» مقدار فاصله را مشخص می کند. مقدار مثبت، خط بیرون می افتد. مقدار منفی، خط داخل مرز می آید. مثل حاشیه نویسی دور دفتر اما کمی دورتر یا نزدیک تر.
مثال 1: فاصله مثبت بیرون از مرز
<style>
p.demo {
margin: 30px;
padding: 5px;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
}
</style>
<p class="demo">Outline is 15px outside the border.</p>
مثال 2: فاصله شفاف روی پس زمینه
<style>
p.demo {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: 15px;
color: black;
}
</style>
<p class="demo">Transparent gap between border and outline.</p>
مثال 3: مقدار منفی و قرارگیری داخل مرز
<style>
p.demo {
margin: 30px;
padding: 5px;
background: yellow;
border: 1px solid black;
outline: 3px solid red;
outline-offset: -5px;
color: black;
}
</style>
<p class="demo">Outline is 5px inside the border.</p>
گام های عملی
- اول «outline» را با سبک و رنگ بده.
- سپس «outline-offset» را برحسب نیاز تنظیم کن.
- اگر تداخل داشت، مقدار را کمتر یا منفی کن.
نکته: بدون «outline-style»، هیچ اثری دیده نمی شود.
برای مطالعه بیشتر: حاشیه بیرونی، رنگ حاشیه بیرونی، و کوتاه نویسی حاشیه بیرونی. همچنین لینک مرجع برای فاصله حاشیه بیرونی را نگه دار.
جمع بندی سریع
- outline بیرون از border قرار می گیرد.
- outline-offset فاصله بینشان را تعیین می کند.
- مقدار مثبت بیرون می افتد.
- مقدار منفی داخل مرز می آید.