Posição dos itens de uma lista em HTML5 CSS3. Vídeo 94

A list-style-position configura a posição horizontal dos itens de uma lista, ou da lista toda caso o configure já nas tags <ol> ou <ul> (listas ordenadas ou não ordenadas).

Neste exemplo configurei diretamente nos itens dessa lista.

O valor outside desta propriedade (list-style-position) é o valor padrão (não é necessário inseri-lo).

Já o valor inside configura essa lista ou o item da lista que recebe essa configuração um pouco mais a frente que o normal.

Insira o código fonte a seguir no seu editor, lembrando que o meu CSS está em um arquivo separado.

Código fonte HTML:

Código fonte CSS:

Viu a tag <p> no meio do código fonte e não sabe porque eu a coloquei ali? Pois bem, se não está muito afim de ver o vídeo eu explico aqui mesmo.

Inseri a tag <p> no meio do código fonte HTML para conseguirmos ver outra configuração automática das listas em HTML, que é o espaçamento dela com relação a margem. Em outras palavras, toda lista já está um pouco mais "para frente" do que parágrafos normais, o que o valor inside faz é colocar um pouco mais para frente.

Assista ao vídeo: