Embedded padding/margin in fonts

Question

It seems that all fonts have some sort of embedded padding or margin. By setting:

margin: 0px;
padding: 0px;

You never get what you want. D

Answer 1

Here is my Opinion

• The margin is the distance from each side to the neighboring element and the margin property can be set for the top, left, right and bottom of an element
• padding is the distance between the border of an HTML element and the content within it.

But in your case you dont really need these both you , as you are interested in font spacing , there is one css property called letter-spacing

• The letter-spacing property increases or decreases the space between characters in a text

Try

 h2 {letter-spacing:-3px}

The letter-spacing property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Answer 2

The fonts itself has problems it seems. CSS can be used as shown above to solve the problem but still it should be said that it is better in your scenario to fix up the font files itself.

Check out this page as it will give you better insight on how to edit a font: http://mashable.com/2011/11/17/free-font-creation-tools/

Answer 3

After looking at the html source of a html document found out that after the normal margin/padding added by all the browsers, chrome by default adds its own webkit's margin/padding properties.

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

Solution is instead of normal

*{
margin:0;
padding:0;
}

Append the style with

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

As -webkit-margin-start and -webkit-margin-end are already set to 0px, there is no use of setting them in here.

Tell me if that works! :)

Answer 4

The reasons of this pecularity of the computer fonts are mostly historical. In the past, fonts were the sets of small metal blocks with one character on each, and the height of these blocks had to be enough to contain all the elements of any character, including descendants, ascendants and diacritical marks. The typographic tradition has defined the font size as the height of such metal blocks. That's why almost all actual characters are usually much smaller visually than the font size set for the text and there is some white space above and below them.

Here is a good article explaining the historical roots of the main typographic measurements: http://www.dev-archive.net/articles/typograph1-en.html#Ch22

Answer 5

I have run into this pain a couple of times when using some webfonts for icons and gained better control by placing them in an absolute positioned container.

HTML

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

CSS

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

This felt like a better way to control things cross browser, rather than say, using positive/negative margins and paddings.

Giving the text block a container and class we have much more cleaner ability to tweak it's position cross browser. ( IMO ).

Might be something there.

Cheers,

Rob

Answer 6

If you want use space between lines in a paragraph, you can use:

line-height: 3px; /*3px is an example*/

Or, if you use space between letters, you can use:

letter-spacing: -2px;