button position absolute not working as expected

Question

Can anyone explain why this button is not absolute-positioned to the right? I would expect it to be 3px from every edge.

HTML:

<div class="wrapper">
    <button>Hello world</button>
</div>

CSS:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

Also, how is it that the button is able to align its contents vertically?

Answer 1

button, like most form elements, is a replaced element. Replaced elements behave differently from regular non-replaced elements (such as div) when absolutely positioned. The following two points from section 10.3.8 of CSS2.1 apply:

1. The used value of 'width' is determined as for inline replaced elements. If 'margin-left' or 'margin-right' is specified as 'auto' its used value is determined by the rules below.

...

6. If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

The width of the button is determined not based on the specified offsets, unlike for non-replaced elements, but by the contents of the button itself. Since the used value of width is not auto, and the specified values of left and right are not auto, the values are over-constrained and the browser is forced to ignore right in order to respect width.

If you want the button to fill the entire height and width of the wrapper, don't use absolute positioning. Instead, specify 100% height and width on the button, and use padding on the wrapper to offset the button:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
    box-sizing: border-box;
}

.wrapper button {
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <button>Hello world</button>
</div>

(If you can't use box-sizing, subtract the padding from the dimensions of the wrapper.)

The vertical alignment of the text probably has to do with how the browser draws button controls by default, which is usually based on system button controls.