Chrome/Safari ignorando le mie regole di reset?

Question

In Safari/Chrome ha spaziatura aggiuntiva sulla sinistra/cima di OL, blockquotes e altri elementi.

Non riesco a isolare questo, tuttavia quando guardo in Web Inspector in Safari, la sua raccolta di un margine sinistro: di 26 pixel su alcuni elementi. Non ho specificato nessuna di queste regole, quindi questo è un bug in Web Inspector?

Qualcuno può illuminarmi sul motivo per cui si verificano questi problemi di spaziatura tra exta? Grazie!

Answer 1

Questo margine sinistro: 26px è lo "stile calcolato" del margine di stile sinistro: 2em. Ecco perché è nella sezione Stile calcolato in Web Inspector di Safari. Quindi, se si modifica il margine-sinistra su altri valori, cambierà anche il valore del pixel in stile calcolato.

In ogni caso ci sono davvero imbottiture extra! Ed è causato dal foglio di stile dell'agente utente (-webkit-padding-start: 40px). Resetta questo stile impostando il padding: 0 sul tuo ol e sugli altri elementi che desideri.

Un buon modo per evitare che questo problema si ripresenti e svilupparsi senza problemi è ripristinare il css. Un reset di base sarebbe:

* { margin:0; padding:0; }