¿Qué propiedad especifica la distancia entre los bordes más cercanos del cuadro marcador y el cuadro principal?

En este artículo, veremos la propiedad que especifica la distancia entre los bordes del borde más cercano del cuadro marcador y el eje principal. El desplazamiento del marcador es la propiedad que especifica la distancia entre los bordes del borde más cercano del cuadro del marcador y el eje principal.

Sintaxis :

style=" marker-offset:em/cm";

Ejemplo 1: en este ejemplo, crearemos listas y aplicaremos la propiedad de desplazamiento del marcador que se establece en 8 cm para la lista desordenada y 6 cm para la lista ordenada .

HTML

<!DOCTYPE html>
<html>
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h5>List of available courses</h5>
    <ul style="list-style:inside square; marker-offset:8em;">
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
    <h5>Data Structures topics</h5>
    <ol style="list-style:outside upper-alpha;marker-offset:6cm;">
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>
</body>
</html>

Salida :         

 

Ejemplo 2 : en este ejemplo, crearemos listas y aplicaremos la propiedad de desplazamiento del marcador que se establece en 0 cm para la lista desordenada y 2 cm para la lista ordenada .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2
    <h5>List of available courses</h5>
    <ul style="list-style:inside square;marker-offset:0em;">
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
    <h5>Data Structures topics</h5>
    <ol style="list-style:outside upper-alpha;marker-offset:2cm;">
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>
</body>
</html>

Producción:

 

Publicación traducida automáticamente

Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *