Właściwość outline-offset

Właściwość outline-offset ustawia odstęp obramowania zewnętrznego - granicy, która nie zajmuje miejsca. Wartością właściwości są dowolne jednostki wielkości, z wyjątkiem procentów. Wartość domyślna: 0. Wartość dodatnia przesuwa obramowanie na zewnątrz od elementu, wartość ujemna - do wewnątrz.

Składnia

selektor {
	outline-offset: wartość;
}

Przykład . Wartość dodatnia

Obramowanie odstaje od elementu (jest on zaznaczony tłem):

<div id="elem"></div>

#elem {
	outline-offset: 5px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Przykład . Wartość ujemna

Obramowanie znajduje się wewnątrz elementu:

<div id="elem"></div>

#elem {
	outline-offset: -10px;
	outline-width: 1px;
	outline-style: solid;
	outline-color: black;
	background-color: #e4f1ed;
	width: 300px;
	height: 100px;
}

Przykład . Wartość ujemna outline + border

Można uzyskać taki ciekawy efekt (zwróć uwagę na grubość białej przerwy między granicami, wynosi 10px, a nie 14, ponieważ część zjadł outline swoją grubością 4px):

<div id="elem"></div>

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Zobacz też

właściwość outline-width,
która ustawia grubość obramowania
właściwość outline-style,
która ustawia styl obramowania
właściwość outline-color,
która ustawia kolor obramowania
właściwość outline,
która jest właściwością skrótową dla obramowań