User Agent Style Sheets : Mystery Margins in Google Chrome

July 27th, 2009 by Nikhil

Yesterday,  like every other “Ground Hog  Day” ,  I was working on some CSS/tableless  layouts. All was going well in IE 7, FF 3 and Chrome, untill suddenly,   I saw some un-ignorable margins seen only in Google Chrome.   Though very strange and worring, It  was some new bug/issue that I had come accross, there was  finally some spice in my mundane work . Sad (but nice) it got fixed within a few minutes of the probe…

Basically ,  It looked like  Google Chrome ignored my CSS Resets  ( margin:0px).  It actually was  caused by the user agent stylesheet (-webkit-padding-start:40px).  So the solution was to reset this style by setting padding:0 the misbehaving elements .
A  good way to prevent this problem from happening to any element is use a global CSS Rest as follows

*{ margin:0; padding:0; }

What is User Agent Style Sheets (Specification) ?
The following  excerpt is taken  from http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , follow link to read more on User Agent Style Sheets

CSS 1 introduces the idea by stating that each User Agent (UA, often a ‘web browser’ or ‘web client’) will have a default style sheet that presents documents in a reasonable – but arguably mundane – manner. CSS 2 says that conforming user agents must apply a default style sheet (or behave as if they did) and that a user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language; CSS 3 is likely to be of the same mind.

Since the CSS specifications leave it up to implementations whether to use a “real” style sheet for default display or not, it’s not astonishing that you don’t find a default style sheet in every browser’s installation folder. Unlike Microsoft’s Internet Explorer as well as Opera, for example (and as far as I know), Gecko browsers like Firefox and Netscape Navigator (look for “html.css”) but also Konqueror make it rather simple to comprehend their default styling.

Tags: , , ,


get ExpressingIT News by Email Subscribe to ExpressingIT by Email |  Follow Me on Twitter


7 Responses to “User Agent Style Sheets : Mystery Margins in Google Chrome”

  1. Expressing IT » Blog Archive » CSS2.1 User Agent Style Sheet Defaults Says:

    [...] Expressing IT Just another, but serious developers weblog « User Agent Style Sheets : Mystery Margins in Google Chrome [...]


  2. mcahornsirup Says:

    I just ran into the same issue… your solution is simple and now it looks like it should : ) In general it might be a great idea to have some defaults… but it is not an expected behavior. Still, chrome is the most reliable browser I know of…


  3. Chris Trott Says:

    Thanks a lot for this post. I was irritated by an added 40px padding that this default sheet added, and finally your post helped me get rid of it!

    - Chris


  4. Simon Says:

    Thanks for this explanation of UA stylesheets. Chrome/safari for some reason override font size on tables with their UA CSS and for some reason it’s preventing the body font-size from inheriting causing all sorts of headaches. *sigh*


  5. Johnsaxon Says:

    So, finally wat shld i do nw! its nt workin after placin * {margin:0px; padding:0px;} ,,, i mean still the spacin is ther????


  6. jay Says:

    this definitely is a bug of chrome, it didn’t implement CSS engine well enough that the children behavior should override their parents’/ancestors’


  7. Mithali Says:

    Hey, I did observe the -webkit-padding stuff and changed it to 0px. I can notice the change in Chrome but not in mozilla. -webkit doesnt support mozilla.


Leave a Reply

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter