Boxmodell bei relativen Grössenangaben

[AndreD]

Hallo zusammen,

Ich stelle mir grad die Frage wie ich beim Boxmodell die einzelnen Attribute bei relativen Angaben richtig bemaße daß ich auf die gewünschten Ausmaße komme.

Bei absoluten Werten ist das ja recht einfach:

#absolute_box
{
  position:absolute;
  top:100px;
  left:100px;
  width:288px;
  height:238px;
  padding-top:10px;
  padding-left:10px;
  border:1px solid #000000;
  background-color:#EBEBEB;
}

ergibt eine Box mit einer Breite von 300px und einer Höhe von 250 Pixel.

Wenn ich nun aber das ganze mit relativen Grössen erstellen möchte:

#relative_box
{
  position:absolute;
  top:10%;
  left:10%;
  width:18%;
  height:18%;
  padding-top:2%;
  padding-left:2%;
  border:0.1em solid #000000; /* <-- [1] Hier ist mein Problem! */
  background-color:#EBEBEB;
}

ergibt eine Box mit einer Breite von 20% und einer Höhe von 20% relativ bezogen auf die Grösse des Browserfensters.

[1] Jetzt weiss ich nicht wieviel ich von meiner width und height abziehen muss um tatsächlich eine Breite/Höhe von 20% zu bekommen. Bei dieser Konstellation habe ich ja jetzt eine Breite/Höhe von 20% + 0.1em x 2, oder?

Also was tun? Das ganze ist nicht so schlimm so lange man kein weiteres Element unmittelbar an das erste rechts davon platzieren möchte, in dem Fall überschneiden die sich exakt um die Breite der Linien :-(

Ich hoffe das war irgendwie verständlich erklärt?

Danke & Grüsse
AndreD