Question

[edit: clarified that box-sizing: border-box doesn’t seem applicable, since I’m using absolute positioning]

The following code illustrates my problem. I’m using absolute positioning, because I found this even trickier with flow-based layout, but I’m open to suggestions. What I want is borders around arbitrary elements, without the borders affecting the positioning of the nodes. (The borders may clip or be overwritten by the content, but that doesn’t matter.)

In particular, the borders of a parent must be able to overlap with the borders of its children, which is not the default behaviour. The CSS box-sizing attribute can be set to border-box to achieve the effect I want, but only (I believe) with inline elements. It has no effect on elements with absolute positioning (as I understand things).

So, my approach has been to use a negative margin to offset the positions of the children by the width of the border. This does indeed seem to cancel out the effect of the border’s presence, but unfortunately not in a way which is consistent across scaling factors. At large scales, things look ok. At the default browser zoom in Chrome, the element positioning goes a bit off (they appear too high); if I go smaller, then the element position goes off in the other direction.

But if I remove the borders entirely, the layout seems to scale ok.

So my question is: is there a reliable (scalable) way to have borders on HTML elements with no impact on the positioning of the elements?

[In the example, I’ve used different colours for some of the borders. I would like to see only black, but at some zooms I can see red and green borders, showing that the element’s position is being affected by the presence of the border.]

thanks
Roly

.bordered {
position: absolute;
height: 18px;
border: 2px solid;
margin: -2px;
}

<span class="bordered" style="width: 55px; left: 30px;">
  <span class="bordered" style="width: 8px; left: 0;">
    (
  </span>
  <span class="bordered" style="border-color: green; width: 47px; left: 8px;">
    <span class="bordered" style="border-color: red; width: 39px; left: 0;">
      <span class="bordered" style="width: 8px; left: 0;">
        5
      </span>
      <span class="bordered" style="width: 31px; left: 8px;">
        <span class="bordered" style="width: 23px; left: 8px;">
          Nil
        </span>
      </span>
    </span>
    <span class="bordered" style="width: 8px; left: 39px;">
      )
    </span>
   </span>
 </span>

Answer 1

Try out CSS2 outline property:

.bordered {
    outline:2px solid blue;
}

Outline does not affect element position.

You can also use CSS3 outline-offset as seen here: http://www.css3.info/preview/outline/