how to display the margin of a <p> element

The <p> is suggested in CSS Spec 2.1 to have a margin of 1.12em, and
in Spec 2.0, to have 1.33em...

But looks like Firefox and Safari both use 1em for it. And IE use
something less... maybe 0.5em

I wonder if there is a way to find out how the <p> is defined as a
default value in your browser?

One way might be to use javascript, but

alert(document.getElementById("ha").style.margin_t op)
alert(document.getElementById("ha").style.margin)

both won't show anything. ("ha" is an ID for a <p> element)

Summercool wrote:

The <p> is suggested in CSS Spec 2.1 to have a margin of 1.12em, and
in Spec 2.0, to have 1.33em...

But looks like Firefox and Safari both use 1em for it. And IE use
something less... maybe 0.5em

I wonder if there is a way to find out how the <p> is defined as a
default value in your browser?

One way might be to use javascript, but

alert(document.getElementById("ha").style.margin_t op)
alert(document.getElementById("ha").style.margin)

both won't show anything. ("ha" is an ID for a <p> element)

You need to get the current style of the object - the .style property
only contains styles which are defined in the element's style attribute
(or have been explicitly assigned to it in script).

See http://www.quirksmode.org/dom/getstyles.html for a useful
cross-browserish method of getting the current style of an element.

Jeremy

On Mar 17, 4:18 pm, Jeremy <jer... (AT) pinacol (DOT) com> wrote:

Seehttp://www.quirksmode.org/dom/getstyles.htmlfor a useful
cross-browserish method of getting the current style of an element.

thanks for the tip.
so

function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y =
document.defaultView.getComputedStyle(x,null).getP ropertyValue(styleProp);
return y;
}

alert(getStyle("ha", "marginTop"))

will show "auto" in IE and an empty string in Firefox. If I add a
style for <p> as margin: 10px, then IE will show 10px and Firefox will
not show anything.

On Mar 17, 4:36 pm, Summercool <Summercooln... (AT) gmail (DOT) com> wrote:

function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y =
document.defaultView.getComputedStyle(x,null).getP ropertyValue(styleProp);
return y;

}

alert(getStyle("ha", "marginTop"))

will show "auto" in IE and an empty string in Firefox. If I add a
style for <p> as margin: 10px, then IE will show 10px and Firefox will
not show anything.

and even if in Firefox, the getStyle is added these 2 lines:

console.log(x.currentStyle)

console.log(document.defaultView.getComputedStyle( x,null).getPropertyValue(styleProp))

for it to show in FireBug, nothing will be displayed.

Summercool wrote:

On Mar 17, 4:18 pm, Jeremy <jer... (AT) pinacol (DOT) com> wrote:

Seehttp://www.quirksmode.org/dom/getstyles.htmlfor a useful
cross-browserish method of getting the current style of an element.

thanks for the tip.
so

function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y =
document.defaultView.getComputedStyle(x,null).getP ropertyValue(styleProp);
return y;
}

alert(getStyle("ha", "marginTop"))

will show "auto" in IE and an empty string in Firefox. If I add a
style for <p> as margin: 10px, then IE will show 10px and Firefox will
not show anything.

You really want getStyle("ha", "margin-top"). This will work in both FF
and IE. If IE gives you "auto" rather than useful information, I'm
afraid I can't help you find the actual value of the default margin.

Jeremy

On Mar 17, 4:40 pm, Jeremy <jer... (AT) pinacol (DOT) com> wrote:

You really want getStyle("ha", "margin-top"). This will work in both FF
and IE. If IE gives you "auto" rather than useful information, I'm
afraid I can't help you find the actual value of the default margin.

OK, so I changed that to margin-top... and Firefox and Safari both
gave 32px when I have

* { font: 32px sans-serif; }

as my only style sheet content...

so looks like both FF and SFR use 1em as margin-top for the <p>
element....

IE, on the other hand, shows "undefined"... but that's good enough to
confirm that all these major browsers do not use the CSS 2.1
suggestion of 1.12em or 1.33em.

Thanks a lot Jeremy.

On 17 mar, 19:14, Summercool <Summercooln... (AT) gmail (DOT) com> wrote:

The <p> is suggested in CSS Spec 2.1 to have a margin of 1.12em, and
in Spec 2.0, to have 1.33em...

But looks like Firefox and Safari both use 1em for it. And IE use
something less... maybe 0.5em

Which version of IE exactly? There are many differences between the IE
versions. FWIW, IE 8 beta 1 uses the CSS 2.1 spec. declaration of
1.12em.

I wonder if there is a way to find out how the <p> is defined as a
default value in your browser?

Install IE developer toolbar in IE 7: IIRC, it will return "auto"
also.
Set the font-size to 100px or some large number and then view the
background color against a grid or ruler on the side of the <p>. As
you noticed, some unspecified versions of IE will return "auto".

One way might be to use javascript, but

alert(document.getElementById("ha").style.margin_t op)
alert(document.getElementById("ha").style.margin)

The above code would be good for inline style, not user-agent
(browser) default values.

Gérard