Getting rid of user-agent stylesheet rules?

Andrei Zisu picture Andrei Zisu · Jun 30, 2011 · Viewed 35.5k times · Source

Something odd is happening in my Chome 12.

I downloaded the latest boilerplate a few days ago and designed on it. Everything was ok.

5 minutes ago, Chrome (Webkit) all of a sudden decided to insert extra css rules in my design:

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;

How do I get rid of this, without adding extra resets?

Edit: also met the problem with h1 elements

-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;

Edit2: my reset contains

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup,
 var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, 
header, hgroup, menu, nav, section, summary, time, mark, audio, video
 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

Answer

thirtydot picture thirtydot · Jun 30, 2011

Those properties are overridden by margin and padding.

Just set margin: 0; padding: 0 if you want the margin and padding gone.

Those properties didn't just suddenly appear, they've been there since forever.

Proof by demonstration: http://jsfiddle.net/VNh3u/ - (obviously, check in a WebKit browser)