CSS Lastnost: outline-offset

Lastnost outline-offset doda prostor med obrisom (outline) in obrobo elementa. Prostor med obrisom in elementom je prozoren. Obrisi se od obrob razlikujejo v tem, da ne zavzamejo prostora, lahko so ne pravokotni in obris je narisan zunaj obrobe elementa.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>outline-offset</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            width: 200px;
            padding: 20px;
            border: 2px solid blue;
            outline: 4px double red;
        }
        div.a {
            margin-bottom: 2em;
            margin-left: 30px;
            outline-offset: 4px;
        }
        div.b {
            margin-bottom: 3em;
            margin-left: 35px;
            outline-offset: 8px;
        }
        div.c {
            margin-bottom: 4em;
            margin-left: 40px;
            outline-offset: 12px;
        }
        div.d {
            margin-bottom: 8em;
            margin-left: 60px;
            outline-offset: 2em;
        }
        div.e {
            margin-left: 90px;
            outline-offset: 4em;
        }
    </style>
</head>
<body>
<div class="a">outline-offset: 4px;</div>
<div class="b">outline-offset: 8px;</div>
<div class="c">outline-offset: 12px;</div>
<div class="d">outline-offset: 2em;</div>
<div class="e">outline-offset: 4em;</div>
</body>
</html>

REZULTAT