-webkit-margin adds unwanted fields to texts

Question

This has not hit me so far (and this is not only in webkit browsers). All texts in p tags, h1 tags, etc ... have extra space above and below the text.

In chrome, I found this:

user user stylesheet

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

This makes misalignment in some places. And yes, I use the reset stylesheet, and no padding or fields are added. Pretty much the basic setup. Why is this and how to solve it?

Answer 1

You can also directly change these attributes like this:

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

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

Answer 2

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

Extra space? Perhaps you set line-height: :?

Answer 3

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

I took a closer look at http://meyerweb.com/eric/tools/css/reset/ and found that I did not declare a common height string for the body tag in my stylesheet. Set it to 1.2 and recreate the correct layout in both browsers.

Answer 4

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

 margin: 0 -2px; 

NEW EDITING:

This has nothing to do with -webkit fields. Most likely, your problem arises with inline elements. This is 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
• closing element closing tag - e.g. </li> (HTML5 doesn't care)
• negative stock (as indicated above - problems with IE6 / 7 - who cares, updates;)
• set font-size: 0; to the problem container of the inline element (has problems with android and if the font size with ems)
• discard the inline and use float (this way you lose text-align: center)

More specifically explained and examples from CHRIS COYIER

Answer 5

Just remove the space between tags, for example.

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

becomes:

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

Answer 6

I had the same problem with the <h3> . I tried to set margin:0; but it didn’t work.

I found that I usually commented out lines in my CSS using // . I never noticed this, because before it did not cause any problems. But when I used // in the line before the <h3> declaration, this made the browser completely skip the declaration. When I trade // for /**/ , I was able to adjust the margin.

The moral of this story is: always use the correct comment syntax!

Answer 7

For me, the picture was:

 * {margin:0;padding:0;} 

In Firefox (FF) and Google Chrome, both values ​​are 0.67em. FF showed its difference by default, but crossed out, but applied it anyway. GC showed its default difference (-webkit-margin-before ...) uncrossed.

I applied

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

but to no avail, although the GC now showed the default intersection.

I found out that I can apply either

 line-height: 0; 

or

 font-size: 0; 

to achieve the desired effect. This makes sense assuming a margin of type .67em. If anyone can explain why browsers make our lives miserable by applying a line-dependent, fixed edge, I would really appreciate it.

Answer 8

For me in Chrome, this caused approximately 40px padding-start . I did the following, which worked:

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

Answer 9

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

This solved it for me when I had this exact problem.

Answer 10

I had the same problem. Suddenly, one of my three table cells containing data, its title was slightly reduced. My problem was simply resolved by adding the following:

 table td { vertical-align: top; } 

It seems like some other element in the “higher” style sheet was telling my data to center itself in the cell, and not just stay on top.

I think this is just stupid, and in fact this is not a problem ... but the next person who reads this topic may have the same stupid mistake as me :)

Be careful!

Answer 11

If the user agent stylesheet starts, this is because the tag property was not correctly defined in your CSS stylesheet.

Most likely, a typo, a forgotten parenthesis, or a semicolon breaks your stylesheet BEFORE the ADDITIONAL REQUIREMENT that your page later refers to or "needs."

Run CSS error checking through validation such as CSS LINT and fix which errors are ultimately detected.