Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does "a" stand for in font: 0/0 a;

I was referring a video tutorial where the designer used font: 0/0 a; for image replacement, so I get that 0 is the font-size, another 0 is the line-height but designer skips the a part just by saying that's an hack.

So what does that a exactly do there?

like image 464
Mr. Alien Avatar asked Dec 17 '13 17:12

Mr. Alien


People also ask

What is em in font size?

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to. So, at 12 points, the em square is 12 points wide.

What is 1em?

One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.

What does em in CSS stand for?

The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.

What is PX and em in CSS?

What is the difference between PX, EM and Percent? Pixel is a static measurement, while percent and EM are relative measurements. Percent depends on its parent font size. EM is relative to the current font size of the element (2em means 2 times the size of the current font).


2 Answers

http://nicolasgallagher.com/another-css-image-replacement-technique/

font:0/0 a – a shorthand property that zeros out the font size and line-height. The a value acts as a very short font-family (an idea taken from the BEM implementation of this method). The CSS validator complains that using 0/0 in the shorthand font property is not valid, but every browser accepts it and this appears to be an error in the validator. Using font:0px/0 a passes validation but it displayed as font:0/0 a in the code that the validator flags as valid.

like image 164
isherwood Avatar answered Oct 31 '22 20:10

isherwood


The a is a font name, and of course it's very unlikely that anyone has a font by that name installed.

It's just used to satisfy the CSS syntax, and what font the browser thinks it should use from that is not important, as it won't be used to show any text anyway.


If you use that on an image in order to get rid of spacing around the image, consider using display:block instead.

like image 26
Guffa Avatar answered Oct 31 '22 18:10

Guffa