Chrome / Safari忽略了我的重置规则？

Question

link text

In Safari/Chrome it has extra spacing on the left/top of ol's, blockquotes and other elements.

I can't isolate this, however when I look in the web inspector in Safari, its picking up a margin-left: of 26px on some elements. I have not specified any such rules, so is this a bug in Web inspector?

Can someone enlighten me as to why these exta spacing problems are occurring? Thanks!

Answer 1

That margin-left:26px is the "computed style" of your styling margin-left:2em. Hence why it's under Computed Style section in Safari's Web Inspector. So if you change your margin-left to some other values the computed-style pixel value will also change too.

Anyway there are indeed extra padding! And it's caused by the user agent stylesheet (-webkit-padding-start:40px). Reset this style by setting padding:0 on your ol and any others elements you want.

A good way to prevent this problem from happening again and develop without worry is to reset your css. A basic reset would be:

* { margin:0; padding:0; }