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 a margin-top and a margin-bottom of zero are added to the "inside" class:

.inside {
     ...
     margin: 0 auto;
     }

In the corner box above: the gap is still there!
Reason: without a vertical padding the background is starting at a margin consisting of the "inside" class margin + the first element margin = 0 + 20px = 20px, and gap still existing...

---

In the css of the corner box below we give the first and last element a padding instead of a margin:

h2, p {
/*   margin: 20px 0; */
     padding: 20px 0;
     }

In the corner box above: the gap is closed.
But now the collapsing margins between the elements don't work any longer (notice: we used a general style for all h2's and p's inside the corner box, to avoid special "first" and "last" classes), and the inner vertical spaces are too large...

---

... so now trying to add some small vertical padding to the "inside" class, with still a vertical margin for the first and last element:

This is working!
In the corner box above: the gap is closed, and the margins of the inner elements can be maintained, thanks to the small vertical padding:

.inside {
     ...
     padding: 1px 10px;
     }

h2, p {
     margin: 20px 0;
     }

---

So far, so good. To see if this can be a universal option, we have to see now what is going to happen with a negative margin-top for the first element (in order to lift it to the top of the box):

.inside {
     ...
     padding: 1px 10px;
     }

.negative-top h2 {
     margin: -12px 0 20px 0;
     }

Still fine. - In the corner box above: the top element can be lifted upwards without gap or disturbing the corners, thanks to the small vertical padding we gave.

---

Can we do the same with the bottom element, to get it close to the border? We'll try as well:

.inside-small {
     ...
     padding: 1px 3px;
     }

.negative-top h2 {
     margin: -12px 0 20px 0;
     }

.negative-bottom p {
     position: relative; /* needed for IE */
     margin: 20px 0 -8px 0;
     }

YES!
It seems that a small vertical padding for the inside class can avoid all gap-saving efforts with special classes and things ...
... that the Liquid Corners concept can be improved in this way,
... and that I have to update some other pages too!

NO! - Stop the press! I did trust IE, but shouldn't have done that. Strupid to forget. Turns out in IE6 (IE7 not yet seen) that the vertical padding is triggering that the (horizontal!) width of the bottom corners is some px to large. And if scrolling up/down: at certain points the gap is coming back (try this page in IE). So we have to find additional tricks for IE.

To be continued ...

francky,
12 March 2007

---