-webkit-margin adds unwanted margin on texts

Question

This hadn\'t hit me until now (and this is not only in webkit browsers). On all texts in like p tags, h1 tags etc... there\'s an extra space over a

Answer 1

I had the same issue. Displaying correctly in Firefox but not Chrome.

I had a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I hadn't declared a general line-height for the body tag in my stylesheet. Set it to 1.2 and that recreated the correct layout in both browsers.

Answer 2

Just remove the whitespace between tags e.g.

<p id="one"></p>
<p id="two"></p>

becomes:

<p id="one"></p><p id="two"></p>

Answer 3

For me, the picture was:

* {margin:0;padding:0;}

Firefox (FF) and Google Chrome both put 0.67em margins regardless. FF showed its default margin, but crossed out, but applied it anyway. GC showed its default margin (-webkit-margin-before...) uncrossed.

I applied

* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}

but to no avail, although GC now showed its default margin crossed.

I found out, that I can apply either

line-height: 0;

or

font-size: 0;

to achieve the desired effect. This makes sense, if one assumes, that the margin is of the .67em - type. If anybody could give an explanation, why browsers make our lives miserable by applying a line-height dependent, non-removable margin, i would be really grateful.

Answer 4

For me in Chrome it was some 40px padding-start that was causing this. I did the following that worked:

ul {
    -webkit-padding-start: 0em;
}

Answer 5

In your css file add the following.

* {
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
}

'*' selects all css elements and overrides the webkit-margin.

Answer 6

I had a same problem. Extra space between menu links. None of the above solutions worked. What worked for me, was negative margin. Just do something like this:

margin: 0 -2px;

NEW EDIT:

This has nothing to do with -webkit-margins. Most likely your problem occurs with inline elements. This happens because you have spaces or line breaks between your inline elements. To fix this, you have many options:

• remove all spaces and line-breaks between inline elements
• skip element closing tag - for example </li> (HTML5 does not care)
• negative margin (as stated above - problems with IE6/7 - who cares, upgrade ;)
• set font-size: 0; to problematic inline element container (has issues with android and if font-sizing with ems)
• give up inline and use float (this way you loose text-align:center)

Explained more specifically and examples by CHRIS COYIER