unexpected margins for html elements

Question

Why document.body.style.margin returns me nothing in chrome and firefox if the style="margin:[some] px" is not set for body.

Now suppose I want the margins of body using offsetParent.offsetLeft css property by some child Element of div.It gives me 0px by default.Well if the body element is initially at default 0px margin then why does my html visual elements are displayed with some margin from left of the page which comes out to be 8px.

Is the body margin 0 px only??

HTML :

<div>
    <p>hello</p>
</div>

CSS:

div {
    height:200px;
    width:200px;
    background:green;
    border:2px solid green;
    padding:10px 10px
}

p {
    height:100px;
    width:100px;
    padding:10px 0 0 10px;
    background:yellow
}

DEMO

`document.body.style.margin` does not give you the full _computed_ style. — Matt Ball, Jul 08 '13 at 18:18
If you use Notepad++ default type of encoding is UTF-8 with BOM, so what type of encoding you use ? try UTF-8 without BOM — Givi, Jul 08 '13 at 18:28
If you have problems with jsFiddle use Normalized CSS, in Fiddle Options http://jsfiddle.net/GKDev/E9VMP/1/ — Givi, Jul 08 '13 at 18:33

score 2 · Answer 1 · answered Jul 08 '13 at 18:20

2

Try using window.getComputedStyle :

window.getComputedStyle(document.body).margin

Inspect the elements to see where the additional offset might be getting in from.

answered Jul 08 '13 at 18:20

loxxy

12,990
2
25
56

Please post your code to get detailed help, here. We cannot magically guess where those offsets come from in your page. – loxxy Jul 08 '13 at 18:25
hello
– chetan mehta Jul 08 '13 at 18:25
My code is this easy i just wanted to get document.write(document.getElementsByTagName("p")[0].offsetParent.offsetLeft); – chetan mehta Jul 08 '13 at 18:26
To get better answers always make the question presentable (I edited your question with the code). Besides I couldn't find any margins with the body tag. – loxxy Jul 08 '13 at 18:32
thanks for the edit.. What no margins isnt your div staarting at some margin from browser window – chetan mehta Jul 08 '13 at 18:33

score 1 · Answer 2 · answered Jul 08 '13 at 18:48

1

From the specs:

"If the element is the HTML body element ... return zero and terminate this algorithm."

The body has an 8px margin because that's the default in Chrome. But it returns 0 for offsetParent.offsetLeft because it has to ;)

answered Jul 08 '13 at 18:48

a better oliver

26,330
2
58
66

Teemu · Answer 3 · 2013-07-08T19:32:43.650

Ques1:

Because style is an object representing the inline style of the element. If you haven't set the inline style, you can't get a value from it either.

Ques2

offsetLeft property is related to its offsetParent element, which is necessarily not the body element. Also, offsetParent may refer to a different element in different browsers, also the Box Model is different, and margin or other properties may or may not applied within the calculations.

EDIT

Obviously body has some default margin, but it seems to be difficult to catch it. Please check this fiddle, you'll find the margins of the body.

A short abstract from the results of the fiddle:

var elem = document.body;
console.log(window.getComputedStyle(elem, null).getPropertyValue('color')); // rgb(0, 0, 0)
console.log(window.getComputedStyle(elem, null).getPropertyValue('marginBottom')); // null or an empty string, depends on the browser
console.log(window.getComputedStyle(elem, null).marginBottom); // Suprise! 8px

As you can see in your console, margin is empty. It would be empty even when you would have assigned a value to it. This is because it's not a real member of the CSSStyleCollection, margin is just a shortcut to set all the properties within a single line. The same stands for example for border.

for the elements inside the div element it is body element.document.getElementsByTagName("p")[0].offsetParent just came out to be — chetan mehta, Jul 08 '13 at 18:40
i just want to know that body element has some default margin or not — chetan mehta, Jul 08 '13 at 18:41

unexpected margins for html elements

3 Answers3