Getting rid of user-agent stylesheet rules?

Question

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; }

Are these not overridden by `margin:0`? – Michael Mior Jun 29 '11 at 22:51 — Michael Mior, Jun 29 '11 at 22:51
Can you post a link to the page? – Brent Jun 29 '11 at 22:57 — Brent, Jun 29 '11 at 22:57
No, the question was already answered. – Andrei Zisu Mar 14 '17 at 01:14 — Andrei Zisu, Mar 14 '17 at 01:14

score 13 · Answer 1 · answered Jun 29 '11 at 22:50

13

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)

answered Jun 29 '11 at 22:50

thirtydot

224,678
48
389
349

Yes but `margin: 3em 0 1em 0; padding: 0;` leaves the `-webkit-margin-*` options intact. – Forbesmyester Jun 22 '14 at 08:13
@Forbesmyester: No, it doesn't. Show a http://jsfiddle.net/ example and state your browser/version. – thirtydot Jun 23 '14 at 12:12
Since this question has a lot of views... you can't "get rid of" user agent stylesheet rules, what you do instead is override the properties you need to (`h1 { margin: 0; }` to override the default `h1` margin, for example). This might also be relevant: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements – thirtydot Apr 01 '16 at 15:23
You might need to adjust h1 to be display:inline-block; – mjs Mar 11 '17 at 07:46

score 6 · Accepted Answer · edited Jan 22 '14 at 19:35

6

Pff, there were misformated comments in my css files, which disabled the reset...

edited Jan 22 '14 at 19:35

Community

1
1

answered Jun 29 '11 at 22:58

Andrei Zisu

4,292
4
21
32

2

Well, that would explain it :) – thirtydot Jun 29 '11 at 23:01
2

Good answer. Next time someone asks me a similar question I'll direct them here. – Okonomiyaki3000 Sep 30 '13 at 02:33
2

Can you provide an example of a mis-formatted comment? I think I'm having the same issue – Jay Jan 22 '14 at 15:38
I just forgot the "*/" at the end I thing. – Andrei Zisu Jan 22 '14 at 19:34
This is why we have syntax highlighting, folks – Bill Jun 04 '14 at 13:30
This helped. Initially my custom CSS was styling my site, then all of a sudden, the user agent started doing so. Using this comment, I validated my css here: https://jigsaw.w3.org/css-validator/#validate_by_input and I did find some invalid commenting I did. Removing that restored my custom CSS styles. – Alex Ander Jul 27 '16 at 19:48

Getting rid of user-agent stylesheet rules?

2 Answers2