「border」で周囲に線を引くと、その分、その領域が占領する面積が増えてしまう。
その結果、隣の領域を追い出す形になる。

そこで、ネガティブマージンを使えば追い出さないようにすることができる。
┌───────────┐  ┌───────────┐
│div#A {               │  │div#A {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│  border-right  :1em; │  │  border-right  :1em; │
│  border-bottom :1em; │  │  border-bottom :1em; │
│                      │  │  margin-bottom :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; ├───────────┐
│}                     │  │}                     │以下ではない          │
├───────────┤  ├───────────┼───────────┤
│    ┌───┬─┐    │  │    ┌───┬─┐    │    ┌───┬─┐    │
│    │      │  │    │  │    │      │  │    │    │  Ａ  │  │    │
│    │  Ａ  │  │    │  │    │  Ａ  │  │    │    ├───┘  │    │
│    │      │  │    │  │    │      │  │    │    │        ａ│    │
│    ├───┘  │    │  │    ├───┤  │    │    ├───┬─┤    │
│    │        ａ│    │→│    │      │ａ│    │    │      │  │    │
│    ├───┬─┤    │  │    │  Ｂ  ├─┤    │    │  Ｂ  ├─┤    │
│    │      │  │    │  │    │      │  │    │    │      │  │    │
│    │  Ｂ  ├─┤    │  │    ├─┬─┼─┤    │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │    └─┴─┴─┘    │
└───────────┘  └───────────┴───────────┘

ここで、間違ってはいけないのが、ネガティブマージにより
自分の本丸を小さくするのではないということ。
隣の領域の開始位置を自分の領域に食い込ませる、つまり、踏んづけてもよしと
するというのがネガティブマージンだ。

つまり、上記のように、「border」と「-margin」を同じ値にするということは、
「boder」の分、自分の領域を減らすのではなく、「border」の上に
のっかてもいいよと許可を出すみたいなもんだ。
もちろん「border＜-margin(の絶対値)」の場合には、
「boder」の内側、つまり自分の領域に浸食されることになる。

つまり、「border」と「-margin」を同じ値にするということは、
他人の領地を侵略しないということではなく
他人の領地を侵略しておいて(線を引いておいて)、
自由にそこに物を置いてもいいですよと言っているようなもんだ。