Autor publikacji
Virtual Patriot - Administrator

outline-offset

Data publikacji
Ostatnio edytowano

Przeznaczenie 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.

Informacje dodatkowe

brak

Informacje techniczne o właściwości outline-offset

przeznaczenie

element HTML każdego typu

pozycja

dowolna

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

tak

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

rozmiar

Wyjaśnienie

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:#7DCDE8;
      }
    </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>