0

I am trying to merge two successive div elements if they have the same coordinates for their borders. While doing tests, I noticed a strange behavior. It seems that sometimes the parent bounding rectangle does not properly compute the coordinates based on its children elements, or at least, there is something that I am missing.

Imagine the example below:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .border {
        border: 5px outset red;
        text-align: right;
    }

    .color {
        background-color: lightblue;
        text-align: center;
    }
    </style>
</head>

<body>
    <div class="border">
        <div class="color">
            <h2>Some Title</h2>
            <p>Some text.</p>
        </div>
    </div>
</body>
</html>

This would render to the image below:

enter image description here

My merging algorithm checks if a div has a unique child which is a div and then check if they have the same bounding rectangle, in this case a call to getBoundingClientRect (or getClientRects for that matter) yields the same result for both div in the example. However upon merging, I realize that I have a different image. The merge yields the following html code:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .border {
    border: 5px outset red;
    }

    .color {
    background-color: lightblue;
    text-align: center;
    }
</style>
</head>
<body>
<div class="border color">
    <h2>Some Title</h2>
    <p>Some text.</p>
</div>
</body>
</html>

Which is rendered like this:

enter image description here

Note that the white stripes on the top and the bottom disappeared. Both red rectangles have exactly the same dimensions, only now the background is filling the entire space.

Using the inspection tooling, I discovered that is because the rectangle of the element h2 and p are actually bigger than the one of the div with the border class, but when I add both class to the div in the second case, then the behavior is as I would expect (matching the rectangle of both children elements). I looked in the specs for the reason of that behavior, but I guess I miss the proper vocabulary since I could not manage to find anything on that.

So here are my questions:

  1. Would a div with no border define behave differently than one with borders?
  2. If the bounding rectangle does not give me the actual rendered rectangle of the div, which strategy would be more reliable?
kabinja
  • 135
  • 2
  • 10
  • margin-collapsing is what you need to know (note that both p and h2 have default margin) – Temani Afif Dec 23 '20 at 23:22
  • That is what I was looking for thanks. But still how can I get the new collapsed dimensions then? Or do I have to implement that myself by doing all the checks that are described in the spec? – kabinja Dec 23 '20 at 23:26
  • use overflow:auto to disable it. There is a lot of way to disable margin-collapsing but overflow is the only one that doesn't change the elements dimension. So you add it when doing your calculation then remove it later – Temani Afif Dec 23 '20 at 23:29
  • Thanks a lot. Will do. – kabinja Dec 23 '20 at 23:35

0 Answers0