72

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 and below the text.

In chrome I found this:

user agent stylesheet

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

This makes the alignment wrong in some places. And yes I'm using a reset stylesheet and no padding or margin are added. Pretty much a basic setup. Why is this and how do I solve it?

tony gil
  • 9,063
  • 6
  • 72
  • 89
tbleckert
  • 3,632
  • 4
  • 30
  • 38
  • 1
    Can you show an example page where `-webkit-margin-after` (or any of the other properties you listed) is making a difference? – thirtydot Apr 19 '11 at 21:38

12 Answers12

47

You can also directly modify those attributes like so:

-webkit-margin-before:0em;
-webkit-margin-after:0em;

Works for me in Chrome/Safari. Hope that helps!

JacobEvelyn
  • 3,443
  • 1
  • 36
  • 47
  • 2
    Why the downvotes? The original question was (in part) implying that default settings for these fields were causing issues, which my solution fixed (this has solved similar issues for me in the past). – JacobEvelyn Jun 29 '14 at 16:15
  • Agreed. Weird that this is being downvoted since it's the only answer that seems to be right. – dwlz Jul 03 '14 at 00:08
  • 5
    @JacobEvelyn downvoted because changing `margin` works on all browsers, while changing `-webkit-...` only works on webkit (I didn't downvote it, but that's what I think) – stenci Oct 01 '14 at 20:26
  • @stenci thanks for the thought. I can't find any documentation for `margin-before` or `margin-after` properties outside of with the `-webkit-` prefix (and I similarly couldn't at the time I answered this). Since the question was asking about these properties specifically I thought this would be the desired solution, but you may be right about the downvote. – JacobEvelyn Oct 02 '14 at 20:31
  • 3
    @JacobEvelyn: Is there a reason why the value of both are "0em" rather than just "0"? – Phil Aug 03 '16 at 19:26
  • 1
    @Phil Not that I can remember. `0` should work fine! – JacobEvelyn Aug 03 '16 at 21:35
  • in my case the problem was that the `
    ` tag which followed the seemingly offending `

    ` tag, wasn't reset properly. After I added `header{ margin:0; padding: 0}` everything went back to normal.

     – Dimitry K Jun 21 '17 at 15:46
41

These -webkit-margin(s) are overwritten by margin: 0; padding: 0;. Do not worry about them.

Extra space? Maybe you've set line-height:?

sohtimsso1970
  • 3,106
  • 4
  • 26
  • 37
atlavis
  • 2,589
  • 1
  • 18
  • 18
  • 3
    line-height is default and margin and padding is 0. As I said, using a reset stylesheet. Still the same. – tbleckert Apr 19 '11 at 20:32
  • have you got any between `

    `, `

    ` etc. ?

     – atlavis Apr 19 '11 at 20:42
  • nope nothing. I should add that the padding is everywhere, not only on my page. And I'm aware of this and I know that this is the way it behaves. I just want to know if it's possible to get rid of it :) – tbleckert Apr 19 '11 at 20:46
  • on every page on the Internet? :) – atlavis Apr 19 '11 at 21:03
  • 7
    @bharal it works for me -- adding `p { margin:0; padding:0; }` overrides the `-webkit-margin` values. they're still visible in Chrome's javascript console, but as overridden values. – ericsoco Sep 29 '12 at 22:37
  • ... they are not marked out in Safari after setting margin and padding to 0 ... http://stackoverflow.com/questions/17516655/is-my-css-properly-reset –  Jul 08 '13 at 14:02
  • 6
    Not really a great answer, non zero margin / padding leaves the -`webkit-margin`'s intact, which is not desired in many cases – Forbesmyester Jun 22 '14 at 07:59
8

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.

Edwin - EEDSGN
  • 81
  • 1
  • 1
5

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

ruuter
  • 2,217
  • 2
  • 27
  • 43
  • I had teh same Problem "remove all spaces and line-breaks between inline elements" worked for me! Thanks! – Cyrill Feb 03 '15 at 18:04
5

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>
Craig
  • 1,929
  • 3
  • 26
  • 36
  • 2
    I personally would not do that. Some Developer in the future may use a HTML beautifier/Formatting tool and re-add the whitespace or do it manually. The principle is the same for why ":empty" is problematic. – Phil Aug 03 '16 at 19:29
1

I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.

I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.

Moral of this story: Always use proper commenting syntax!

story
  • 699
  • 2
  • 9
  • 21
1

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.

d_le_nen
  • 27
  • 1
  • 4
0

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;
}
Gaui
  • 7,936
  • 13
  • 59
  • 86
0
    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

This solved it for me when I was having this exact problem.

andromedainiative
  • 3,067
  • 3
  • 20
  • 31
0

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.

Peter
  • 124
  • 5
-1

I had the same problem. Suddenly one out of my three table cells containing data its header was moved down a little bit. My problem was simply solved by adding this:

table td
{
    vertical-align: top;
}

Seems like some other element in a 'higher' style sheet was telling my data to center itself in the cell, instead of just staying on top.

I guess its just stupid, and wasnt really a problem... but the next person to read this topic might have the same stupid error as i did :)

Take care!

WhoKnows
  • 100
  • 1
  • 11
-1

If user agent stylesheet is kicking in, it is because the tag property was not properly defined in your css stylesheet.

Chances are that a typo, forgotten bracket or semicolon is breaking up your stylesheet BEFORE reaching the tag property settings your page later refers to or "needs".

Run your CSS thru error checking, like CSS LINT and fix whichever errors are eventually detected.

tony gil
  • 9,063
  • 6
  • 72
  • 89