New issue
Advanced search Search tips
Starred by 8 users

Issue metadata

Status: Fixed
Owner: ----
Closed: Mar 2012
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

  • Only users with Commit permission may comment.

Sign in to add a comment

Computed style margins return incorrect values.

Reported by, Oct 5 2009 Back to list

Issue description

Chrome Version       :
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 4: FAIL
  Firefox 3.x: OK
         IE 7: OK
         IE 8: OK

It's a Webkit problem I think. But it's been outstanding there for months at

When an element is explicitly sized within another sized element, so that there
is empty space to its right, the *computed style* returned for the inner
element's margin-right value is the width of that empty space.

This is not correct. That's just empty space.

To illustrate, I have included a very simple  test page.

It uses the ExtJs library just as a vehicle to get the computed style. It has
an Element class which encapsulates a DOM element, and this offers a getMargins
method which requests the *computed* style for the element.

To run this example, download the ExtJs SDK. Drop this page into examples/<any

On Webkit based browsers, the red DIV reports its left+right margin total to be

On Firefox, it is correctly reported as zero.

<title>Margin bug</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
    var inner = Ext.get("inner");
    var m = inner.getMargins('lr');
    inner.update('My left+right margins are ' + m);
<div id="outer" style="height:300px;width:500px;border:1px solid black">
    <div id="inner" style="height:200px;width:200px;background-color:red">
Don't believe it? Here's a simpler test page:

<title>Margin bug</title>
<script type="text/javascript">
runTest = function() {
    var inner = document.getElementById("inner");
    var lm = parseInt(document.defaultView.getComputedStyle(inner, null).marginLeft, 
    var rm = parseInt(document.defaultView.getComputedStyle(inner, null).marginRight, 
    var m = lm + rm;
    inner.innerHTML ='My left+right margins are ' + m;
<body onload="runTest();">
<div id="outer" style="height:300px;width:500px;border:1px solid black">
    <div id="inner" style="height:200px;width:200px;background-color:red"></div>

Cab we have some action on this!

This is a BUG and a bad one!

It simply reports a completely erroneous margin value. SO we cannot work out how much 
space is taken up by an element including its margins!
YO! Some action on this?

Comment 4 Deleted

To revamp this bug report a bit:
1. I've attached a javascript testcase based on
2. Some related links:
  * Browser Shots:
  * Webkit ticket 1:
  * Webkit ticket 2:
  * Dojo toolkit ticket:
3. Current render engine results:
  * Presto: 0
  * Gecko: 0
  * Trident: auto
  * Webkit: 300
  * KHTML: 300
92.1 KB View Download
1.0 KB View Download
*prod* Some movement on this would be great. Webkit can read margin-right fine on 
display:none elements, it only fails on block elements.

Comment 7 by, Jun 17 2010

If this helps anyone, I've been able to workaround this issue by appending the problem element I want to measure in a div with position:absolute applied to it. No other styles are needed on that extra parent and the problem element then reports the correct computed style.

I hope this helps.

Comment 8 by, Jun 29 2010

I Ran into the same problem today using Mootools, so I dove into their sourcecode and started narrowing down the possible troublemakers. Eventually this resulted in the attached test.htm file: in Firefox and Opera the test page alerts '0px', in Safari and Chrome '150px', the exact difference between the parent en child elements' widths.

I am going to give siunmaru's workaround a try, let's hope for the best!
463 bytes Download

Comment 9 by, Feb 4 2011

See for a first patch.

Comment 10 by, Feb 16 2011

Fixed in Webkit 78436 and latest Chromium build.
Screen shot 2011-02-16 at 13.15.58.png
88.4 KB View Download

Comment 11 by, Mar 13 2012

Status: Fixed
Project Member

Comment 12 by, Oct 13 2012

Labels: Restrict-AddIssueComment-Commit
This issue has been closed for some time. No one will pay attention to new comments.
If you are seeing this bug or have new data, please click New Issue to start a new bug.

Sign in to add a comment