Vlastnost outline-offset

Vlastnost outline-offset nastavuje odsazení vnějšího obrysového rámečku - hranice, která nezabírá místo. Hodnotou vlastnosti jsou libovolné jednotky pro velikosti, kromě procent. Výchozí hodnota je: 0. Kladná hodnota posouvá rámeček směrem ven od elementu, záporná - dovnitř.

Syntaxe

selektor {
	outline-offset: hodnota;
}

Příklad . Kladná hodnota

Obrysový rámeček je odsazen od elementu (element je zvýrazněn pozadím):

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

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

Příklad . Záporná hodnota

Obrysový rámeček se nachází uvnitř 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;
}

Příklad . Záporná hodnota outline + border

Lze vytvořit takovýto zajímavý efekt (všimněte si šířky bílého mezery mezi hranicemi, je 10px, nikoli 14, protože část pohltil outline svou tloušťkou 4px):

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

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

Viz také

vlastnost outline-width,
která nastavuje tloušťku obrysového rámečku
vlastnost outline-style,
která nastavuje styl obrysového rámečku
vlastnost outline-color,
která nastavuje barvu obrysového rámečku
vlastnost outline,
která je zkratkovou vlastností pro obrysové rámečky