-webkit-margin adds unwanted margin on texts

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;
-webk开发者_开发知识库it-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?

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!

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

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

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.

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>

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

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!

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.

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

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

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

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.

Modern properties

The following properties should be used instead.

margin-block-start: 0;
margin-block-end: 0;

It's very rare to need to use these at all, but the following can be useful to avoid extra space after the last paragraph in a series.

p:last-child
{
   margin-block-end: 0;
}

I also found that even in Chrome you can trigger the 'ghost margin' by setting margin to inherit in some cases.

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start

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!

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.