آموزش فاصله خط بیرونی در CSS

تعریف outline-offset

ویژگی outline-offset در CSS برای ایجاد فاصله بین خط بیرونی (Outline) و لبه یا مرز (Border) عنصر استفاده می‌شود.
این فاصله شفاف است و هیچ رنگ یا پس‌زمینه‌ای ندارد.

مثال: Outline با فاصله ۱۵px بیرون از مرز

در این مثال، خط بیرونی قرمز با فاصله ۱۵px خارج از مرز سیاه عنصر قرار گرفته است:

p {
  margin: 30px;
  padding: 5px;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: 15px;
}

در این مثال، فاصله بین مرز عنصر و خط بیرونی شفاف است و پس‌زمینه زرد دیده می‌شود:

p {
  margin: 30px;
  padding: 5px;
  background: yellow;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: 15px;
}

اگر مقدار outline-offset منفی باشد، خط بیرونی داخل مرز عنصر قرار می‌گیرد.
در مثال زیر، خط بیرونی قرمز با فاصله -۵px داخل مرز سیاه رسم شده است:

p {
  margin: 30px;
  padding: 5px;
  background: yellow;
  border: 1px solid black;
  outline: 3px solid red;
  outline-offset: -5px;
}

همه ویژگی‌های Outline در CSS