Ostatnio edytowany:

outline-offset

Autor: Virtual Patriot

Opis właściwości outline-offset

Za pomocą właściwości outline-offset możemy określić rozmiar odległości obrysu od krawędzi interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości outline-offset

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości outline-offset

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Opis wartości właściwości outline-offset

rozmiar

Opis

Za pomocą właściwości outline-offset oraz dowolnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar odległości obrysu od krawędzi interesującego nas elementu HTML.

Wartości dodatnie

wartości dodatnie oddalają obrys od krawędzi elementu HTML

Wartości ujemne

wartości ujemne przybliżają obrys do obszaru wnętrza elementu HTML, lecz nie wszystkie przeglądarki internetowe muszą interpretować tę cechę

Przykład

  outline-offset:5px;
rozmiar odległości obrysu tego elementu "div" od krawędzi tego elementu "div" wynosi 5 pikseli, ponieważ do tego elementu "div" została dodana właściwość "outline-offset" wraz z wartością "5px"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        outline:5px solid blue;
        outline-offset:5px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar odległości obrysu tego elementu "div" od krawędzi tego elementu "div" wynosi 5 pikseli, ponieważ do tego elementu "div" została dodana właściwość "outline-offset" wraz z wartością "5px"
    </div>

  </body>
</html>