CSS default style of DOM elements

Question

Possible Duplicate:
Browsers' default CSS for HTML elements

Is there a reference somewhere of all the default styles of DOM elements?

For example, how big the margin above an <h1> is?

Is there some easy way to extract this? I tried:

document.getElementById("myheading").style.marginTop

But it returned blank. Presumably because nothing had been defined for marginTop?

Thanks in advance.

this is provided by w3 for CSS 2.1: http://www.w3.org/TR/CSS21/sample.html — PlantTheIdea, Feb 04 '13 at 22:13
@LifeInTheGrey ...which is not the most recent version of the HTML specification. — Matt Ball, Feb 04 '13 at 22:15
@Matt - CSS 2.1 is the most recent official version of CSS. I edited my verbiage so that people that don't bother clicking the link don't complain. — PlantTheIdea, Feb 04 '13 at 22:16
"Official," perhaps, but what the _de facto_ current version (CSS3)? — Matt Ball, Feb 04 '13 at 22:18
@Matt - appreciate the unnecessary argumentation. Despite my huge advocacy of CSS3, I'm not deluded enough to think that its been standardized in any way, other than polite suggestions (thats why you use all those silly prefixes ... no one has agreed on anything). I provided that reference because it is useful for things like h1, the item he refers to. — PlantTheIdea, Feb 04 '13 at 22:19
Are you actually trying to get the top margin of the element? Or perhaps a different value? Like the position of an element related to its offset parent? Or to the document? Maybe look at http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag — Ian, Feb 04 '13 at 22:21
It's important to remember that these things can be defined in a **user agent stylesheet**. Those for main browsers can be found via [**this excellent answer**](http://stackoverflow.com/a/6867287/1615483) — Paul S., Feb 04 '13 at 22:58

Jordan · Accepted Answer · 2013-02-04T22:28:02.097

2

You have a few options. The specs have a loosely defined list. HTML4 and HTML5

If you wish to actually see the computed style, you can use a program like Firebug, Chrome Developer Tools, IE Developer Tools, or Opera Dragonfly.

If you need to programmatically get the computed style, I recommend that you use jquery to even out the differences, or use the getComputedStyle() or currentStyle attributes of an element. jQuery does this for you automatically.

If you just want to know how to handle this cross-browser without going insane, I recommend using a Reset Stylesheet. There are many. Eric Meyer's is the most famous, but nowadays there are many tools, like Bootstrap, Blueprint, Normalize, and YUI.

edited Feb 04 '13 at 22:28

answered Feb 04 '13 at 22:21

Jordan

31,971
6
56
67

Reset is a good one, but a better one (IMHO) is Normalize.css. It doesn't seek to take it back to scratch like Reset, it tries to create a similar experience across all browsers by eliminating the quirks of individual ones. – PlantTheIdea Feb 04 '13 at 22:25
Thanks for the input. I added that to the answer. – Jordan Feb 04 '13 at 22:28

score 1 · Answer 2 · edited May 23 '17 at 12:18

Each browser has it's own implementation in it's user agent stylesheet. This excellent answer has links to resources for WebKit, Firefox/Gecko and IE. You can discover the values on a (rendered) DOM node using window.getComputedStyle(node);. Note that there are some exceptions to this method (visited links will return as if not visited for security reasons).

For <h1>, here is the relevant CSS for each

Webkit

display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold

Firefox/Gecko

display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;

IE6/7

display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;

IE8/9

display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;

CSS default style of DOM elements

2 Answers2