Esempio di utilizzo della proprietà list-style-position

Questo esempio mostra la differenza visiva tra i valori inside e outside:

• Elemento con marcatore all’esterno
• Secondo elemento con testo più lungo che va a capo per mostrare l’effetto dell’allineamento.

• Elemento con marcatore all’interno
• Secondo elemento con testo più lungo che va a capo per mostrare l’effetto dell’allineamento.

CSS e HTML per l'esempio con list-style-position:

  
  <style>
    .list-position-outside {
      list-style-position: outside;
      list-style-type: disc;
      font-size: 18px;
      background-color: #fff;
      padding: 10px;
    }

    .list-position-inside {
      list-style-position: inside;
      list-style-type: disc;
      font-size: 18px;
      background-color: #c9ddff;
      padding: 10px;
    }
  </style>

  <ul class="list-position-outside">
    <li>Elemento con marcatore all’esterno</li>
    <li>Secondo elemento con testo lungo...</li>
  </ul>

  <ul class="list-position-inside">
    <li>Elemento con marcatore all’interno</li>
    <li>Secondo elemento con testo lungo...</li>
  </ul>