These buttons are made with hyperlinked text inside a box, which is inside a table cell of a one row table. The table uses HTML DIV elements and CSS table-* property values. The whole table is wrapped in a 1px solid blue border, with 14px of border spacing. Each table row is wrapped in a 1px solid green border (which does NOT show up). Each table cell is wrapped in a 1px solid red border. Each table cell also has 2px of its own padding just to get the red border a little distant from the button so it is easier to see. Notice how the table cell padding is NOT symmetrical (another bug?). Each button box is background colored light blue with a 1px solid blue border. The button box color will change with hover to light orange with a 1px solid orange border. The button box color will change with click to light green with a 1px solid green border. The "Sit" button is intentionally shifted down by 9px to show how the padding overlap is taking place. The shift is done by adding a class to the HTML DIV element for the button box. The various padding tests are applied by adding a class to the HTML DIV element for the button box that adds 20px of padding for the specified side.

The stylesheet is embedded in the HTML, so it can be viewed when the HTML source ie viewed.

No padding - except for that 2px inside the table cell which does not expand the blue button box.

Padding on top and bottom - this works as expected. If I specify Npx of padding, I expect to get Npx of padding.

Padding on left only - notice how the padding is additionally added to the right, but that the containing table cell does not expand for it.

Padding on right only - notice how the padding is twice as much as specified, and the containing table cell is expanded only for a single amount.

Padding on left and right - notice how there is a total of twice as much padding as actually specified but the containing table cell is expanded for a single amount.

Padding on all four sides - all I wanted was a symmetrical upsizing of the text button box.