Javascript Element.getBoundingClientRect() return wrong when direct children of element has top/bottom margin

Question

HTML

<body>
  <div id='el1'>
   <div class='directChildren' style='width:50%;height:100px;float:left;margin-top:0'>
    ....
   </div>
  </div>
  <div id='el2'>
   <div class='directChildren' style='width:50%;height:100px;float:right;margin-top:20px'>
    ....
   </div>
  </div>
  <div style='clear:both'/>
</body>

JS

const topEl1 = document.getElementById("el1").getBoundingClientRect().top; // return 0 (only example)
const topEl2 = document.getElementById("el2").getBoundingClientRect().top; // return 20 (topEl1 + margin top of el2)

QUESTION: Both of divs (el1, el2) has same top coordinate but why getBoundingClientRect return different ?. This case also happen for margin-bottom.

Sujit Kumar Singh · Accepted Answer · 2020-09-26 04:20:30Z

1

Because the CSS is not properly defined. You are using float on inner element(.directChildren) instead of using it on #el1 and #el2 without properly clearing float behavior on parent elements. That is why the effect of margin-top is overflowing the parent's dimension.

It is much easier to achieve the correct result by using following HTML and CSS where I have used proper styling by using flex. You can also use float if you want.

<div class="container">
  <div id='el1'>
    <div class='directChildren' style='height:100px;margin-top:0'>
      ....
    </div>
  </div>
  <div id='el2'>
    <div class='directChildren' style='height:100px;margin-top:20px'>
      ....
    </div>
  </div>
</div>

.container {
  display: flex;
}
.container .directChildren {
  flex: 1;
}

answered Sep 26, 2020 at 4:20

Sujit Kumar Singh

1,08810 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kardinata Over a year ago

I'am sory, the code has been edited, please review again. That was what i mean before.

Modus Tollens Over a year ago

@Kardinata Please don't change a question after it has been answered as this invalidates the answer. Ask a new follow-up question instead. I will roll back the question to its original version.

Collectives™ on Stack Overflow

Javascript Element.getBoundingClientRect() return wrong when direct children of element has top/bottom margin

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related