Why Don't Margin-Top: Auto and Margin-Bottom:Auto Work the Same as Their Left and Right Counterparts

Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?

The short answer is the spec says so.

10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

margin: auto auto

Ultimately it's a w3c spec -

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

It does seem like it would be handy.

Border of outer element affects how margin of inner element is displayed, why?

This is caused by the fact that CSS uses collapsing margins.

That link will explain it far better than I will, so I'd recommend giving that a read, but to give you a short summary:

Margin in CSS is designed to be displayed outside of an element. This behaviour gets a bit murky when dealing with elements within other elements, as the margin can be considered outside of the child in both cases of whether it is within the parent or outside of the parent. It was determined that margin's would always seek to be outside of all parent elements as well, unless that parent had a style which prevented this logic from being true. For example, if the parent has a border, it now has something above it which separates the child from the outside world, meaning that the child's margin must belong inside of the parent. If not, there is no separation, so the child's margin ventures outward.

If you wanted to always have the margin inside of the parent, a better option might be to apply padding to the parent element, instead of margin to the child.

Placing margins between all td except the margin-top of first td and margin-bottom of last td

Placing different margins on individual table cells isn't really possible. You could use border-collapse and border-spacing, but as you have noted, this applies equally to all cells in the table.

You could also use padding on the individual cells. So, keep the table at border-collapse: collapse, and use padding on the individual cells for spacing. This creates the visual effect of margin space, but it's not really margin.

One thing you may want to consider is wrapping your td content in a div. Then use borders – with the same color as the background – on the table cells to space them around:

body { background-color: white; }
table {    width: 98%;    margin: 0 auto;    border-collapse: collapse;}
td > div {    border: 1px solid black;    padding: 2px;}
td {    border-top: 10px solid white;    border-bottom: 10px solid white;    border-left: 50px solid white;    border-right: 50px solid white;}
tr:first-child > td { border-top:  none; }
tr:last-child > td { border-bottom:  none; }

<table>    <tr>        <td><div>Hello World1</div></td>        <td><div>Goodbye World1</div></td>    </tr>    <tr>        <td><div>Hello World2</div></td>        <td><div>Goodbye World2</div></td>    </tr>    <tr>        <td><div>Hello World3</div></td>        <td><div>Goodbye World3</div></td>    </tr></table>