CSS Default Units

what is the default unit for margin-left

There is no default unit.

The CSS is invalid, as the non-zero value doesn't have a unit.

Browsers will handle the incorrect code in different ways depending on what browsers it is, and in what mode the page is rendered. In quirks mode (without a doctype), most browsers will try to correct the code by using the unit px. In standards compliance mode (with a proper doctype), most browsers will ignore the style.

Default unit for font-size?

Per the "CSS Fonts Module Level 3" the font-size property can have values that are:

Value: <absolute-size> | <relative-size> | <length> | <percentage>

<absolute-size>, <relative-size>, and <percentage> are defined in the same spec, and are all either keywords (e.x. small, larger, etc) or have percentage units.

<length> being more generic is defined in "CSS Values and Units Module Level 3":

Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension. However, for zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <number> 0).

What this means is that unitless numbers for font-size are invalid, with an explicit exception for 0.

With that said, what size is <div style="font-size: 20;">20 size</div> being rendered at?

The rendered font-size of an element will depend on a lot of things. However, if we're able to assume that

the user hasn't customized their default font-size
the browser is using default styles
there are no parent elements that would otherwise change the font-size (e.x. <font>, <sub>, <h1>...yes it would be invalid markup to have those elements as parents, but it would still change the font-size)

Then the default font-size in every modern browser that I'm aware of currently is 16px.

What is the default SVG unit in CSS?

The default (user) unit is px.

One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5".

Per the SVG specification

What is the default unit if the specified font size has none?

So the Font tag had 7 degrees of freedom. You can specify a value between 1 and 7. 7 is largest and 3 is default

Font Tag

In CSS you have the font-size property, also 7 degrees of freedom, the constants for it are not numeric, and medium (which is the 3rd value) is the default.

FONT Tag   font-size CSS

N/A             xx-small

       1          x-small

       2          small
       3          medium          (default values)
       4          large
       5          x-large
       6          xx-large
       7          N/A

CSS font-size Property

So if you consider that the default values do not match up exactly betewen both standards, then we can assume that the standards are slightly different, without 1:1 mapping or meaning. Your value of 2, might be small and it might not. I do think that is probably is small though.

You will discover that other factors are coming into play with CSS, and you will generally discover other discrepancies that prevent a direct conversion between the Font tag and the CSS properties. You might be safe on this one, though, as these values are defined as "absolute sizes".

see: It Depends
see: Size to px

Must use PX in CSS or it it not mandatory

Using a unit has always been mandatory. However, in Quirks mode, you can usually get away with omitting the px, since the browser's error correction will fill in the px for you. That is, usually, but not always.

In Standards mode, a length without a unit is always considered an error, and the style is not used. I therefore conclude that you must be using Quirks mode, which is not a good idea.

Here is an example:

<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <div style="border:5 solid black">A div with border:5 solid black</div>
  </body>
</html>

Copy this to a HTML document and load it into a browser. Some browsers will show the 5px border, others won't.

(Sorry I can't provide a link here that you can click on, since I can't find an online snippet service that won't add a doctype declaration!)

So it's best to always use a unit, even though you can find situations in which it doesn't seem to make a difference.

When/Why Do CSS Property Values Need to Specify px?

All CSS properties that take a length value require units (of which px is an example) for values other than 0.

This has always been the rule for CSS, so this is nothing to do with the maintainers of the CSS specification.

For backwards compatibility with the buggy browsers of the 1990s, when the page's Doctype triggers quirks mode, lengths default to px units. This is an intentional emulation of bugs by browser developers.

I assume that this backwards compatibility rule does not apply for newer properties that didn't exist in the days that those browsers were around.

Always use a Doctype that triggers Standards mode. The inconsistencies of Quirks mode are more trouble then they are worth. Always specify units for non-zero lengths.

Unit for sizes in CSS

TL;DR:

Use % for horizontal page layout
em works great for vertical spacing
Use anything you prefer for font-size (I like em)
Use em for media queries

CSS Measurement Units

I find that my usage of different CSS measurement units varies with the area of measurement I'm dealing with: horizontal, vertical, typography, or media query.

Horizontal measurements

The horizontal space gives structure to the page. Thus, horizontal measurements work well with units relative to the page width (%). For example, it's great for giving some basic breathing room to the main content:

#main {
  width: 90%;
  margin: 0 auto;
}

More complex layouts (columns, for example) also work well when one or all of the horizontal measurements are proportional to the page or to their container.

.column-main {
  width: 61.8%; /* The golden ratio is pretty awesome. */
}

.column-secondary {
  width: 38.2%;
}

There's a corollary to this idea, which is that if you set up your container structure well, you won't have to do much horizontal sizing on the contents. You basically let the block-level elements fill the width of their container, as they like to do, and you're all set.

Vertical measurements

Vertical space is more about the structure of the content (i.e. how close elements in the document flow are to one another), and I think these measurements work fine with both fixed and relative units (px or em).

However, using relative units here helps give you a vertical rhythm, which can be very pleasing. It also allows you to make changes to your content (read: font-size) and keep your vertical spacing proportional.

p, ul, ol, dl {
  margin: 0 1em; /* gives you proportional spacing above and below, 
                    no matter the font size */
}

Typographic measurements

Font measurements fall into their own category, maybe because font-size acts as the base for all other measurements in em. I've seen advocates for different strategies, but from what I've seen any measurement will work fine, as long as you know what you're doing.

px

Setting font-size in px is extremely reliable and easy to calculate. In the post-IE6 age, it also scales nicely, so there's really no reason not to use px if that's what you prefer.

The only problem I see in using px is that it doesn't take advantage of the CSS cascade. In other words, once I've specified sizes in px, I have to go back and change each one of them individually if I want to make any large-scale changes.

em

Despite any drawbacks, I think em can be a really good way to specify font-size. What I like is that it lets me quickly see the relationship between my font sizes. A lot of times I don't care what the exact size of the font is because the most important thing for me is the relationship of that size to all of the other sizes on the page.

The important thing about using em is to set the sizes as close to the end tag as possible. That means I avoid setting font units on containers:

aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */

And mostly set sizes on headings and text items:

h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...

Anyway, I like that I can see clearly and easily the relationship between the sizes there.

rem

Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.

The biggest drawback here I see is browser support. If you code for browsers that don't support rem, you'll be adding your rules twice:

p {
  font-size: 16px;
  font-size: 1rem; /* I kind of hate repeating myself here,
                      but a good CSS preprocessor might ease that pain. */
}

Font Spacing

Other font measurements are a lot easier to figure out once you've got your font-size since most other font measurements fall into the category of either vertical or horizontal measure. For example:

h1 {
  font-size: 2.5em; /* Change this, and everything below stays proportional.
                       (Use whatever measurement unit you prefer.) */
  margin-top: 0.618em;
  margin-bottom: 0.3em;
  line-height: 1.2; /* The only unit-less measure in CSS */
}

Media queries

In most cases, there is little difference between the way browsers handle em and px in media queries. This holds true even when a user uses text zoom to resize the page.

HOWEVER, if someone has changed the default text size in their browser settings, things behave very differently. See my answer to a related question and my codepen demo for a longer explanation.

In short, while px works well for media queries in most cases, it's definitely safer to go with em.

Other cases

There are certainly cases where the above general comments don't apply. For example, you may find that ems come in handy any time you want things proportional to the font size, like the following:

h1.title {
  font-size: 2em;
  width: 20em; /* Resizing the font also resizes its container properly. */
  background-color: #d00d1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em; /* Woot! Didn't have to touch the width! */
  }
}

Or maybe you want to constrain line lengths for readability:

p {
  max-width: 42em;
}

Also, as mentioned in other comments, px still works well for borders and things like that. It can also be good for padding, especially when you pair it with box-sizing:

.example {
  width: 80%;
  box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
  padding: 10px;
}