Propiedad outline-offset de CSS

La propiedad outline-offset se utiliza para especificar el espacio entre un contorno y el borde exterior de un elemento. El espacio entre el contorno y el elemento es transparente.

Existen tres formas en las que los contornos difieren de los bordes:

un contorno es una línea que se dibuja fuera del borde exterior del elemento,
un contorno puede no ser rectangular,
un contorno no ocupa espacio.

Esta propiedad es una de las propiedades de CSS3.

No forma parte de la propiedad abreviada outline. La propiedad outline-offset debe especificarse por separado.

Valor inicial	0
Se aplica a	Todos los elementos.
Heredable	No.
Animable	Sí. El ancho del espacio es animable.
Versión	CSS3
Sintaxis DOM	object.style.outlineOffset = "20px";

Sintaxis

Sintaxis de CSS outline-offset

css

outline-offset: length | initial | inherit;

Ejemplo de la propiedad outline-offset:

Ejemplo de código CSS outline-offset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        margin: 20px;
        border: 2px dotted #000;
        background-color: #8ebf42;
        outline: 4px solid #666;
        outline-offset: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Outline-offset property example</h2>
    <div class="ex1">The outline-offset is 10px</div>
  </body>
</html>

Try it Yourself »

Resultado

CSS outline-offset values list

En el ejemplo dado, el espacio entre el contorno y el borde es de 10px.

Valores

Valor	Descripción
length	Espacio entre el contorno y el borde exterior de un elemento. El valor predeterminado es 0.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué se puede decir sobre la propiedad CSS outline-offset según la información proporcionada en la URL dada?

La propiedad outline-offset no forma parte del estándar CSS.La propiedad outline-offset añade espacio entre un contorno y el borde/borde de un elemento.La propiedad outline-offset solo permite valores positivos, siendo el predeterminado 0.El valor inicial/predeterminado de la propiedad outline-offset es 0.La propiedad outline-offset hereda el valor de su elemento padre.Se pueden usar valores porcentuales con la propiedad outline-offset.

Propiedad outline-offset de CSS ​

Sintaxis ​

Ejemplo de la propiedad outline-offset: ​

Resultado ​