In the corner box above: the starting element <h2> as well as the finishing element <p> of the corner box has got a vertical margin of 20px, with omitting the classes .notopgap and .nobottomgap (as described in the liquid corners article).
Result: huge gaps are coming!

---

In the corner box below: as first and last element in the .inside box an extra div is placed:

     <div class="gap-saver-beta"></div>

with:

.gap-saver-beta {
     height: 1px; /* without height it doesn't exist :-) */
     margin: 0;
     padding: 0;
     background: green; /* for illustration where it is */
     }

In the corner box above: the gap is closed!
However, in IE the "1px height" of this div is blown up to a big green bar. Reason: IE is giving it the line-height of the default font-size (check: the height is shrinking or expanding at font scaling).

---

In the css of the corner box below: we add a line to calm down IE, we omit the illustrating green background, and add a negative margin-bottom to neutralize the 1px height (now it is "invisible existing"):

.gap-saver {
     height: 1px; 
     margin: 0 0 -1px 0;
     padding: 0;
     font-size: 1px; /* to correct IE */
     }

In the corner box above: the gap is closed, and inside the two gap-saving div's every vertical margin is allowed.
It can be used not only for reasons of dynamic CMS filling of the content, which cannot assign automatically a special "notopgap" and "nobottomgap" class to the first and last content element (eh, not without DOM-scripting) ...

---

... but also if you need some text close to the top corners (lifting text upwards overlapping the height of the corners), without harm: not painting the side borders across the transparency of the corners. Everything is position!