آموزش ویژگی outline-offset در CSS

آفست اوت لاین در CSS

ویژگی outline-offset یک فضای (شفاف) را بین outline و کادرهای(border) یک عنصر، اضافه می کند. فضای بین عنصر و outline ،شفاف(transparent) است. در مثال زیر، یک فضای شفاف بین outline  و کادرها، به مقدار 15px مشخص شده است:

این پاراگراف یک outline دارد که به مقدار 15px در بیرون از border(کادر) قرار گرفته است. (یعنی یک فضای شفاف بین border و outline به مقدار 15px قرار گرفته است).

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

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

این پاراگراف یک outline دارد که به مقدار 15px از کادرها(border) فاصله دارد.

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