Button position is absolutely not working properly

Question

Can someone explain why this button is not located absolutely right? I expect it to be 3px from each 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 a button can align content vertically?

Answer 1

button , like most form elements, is a replaced element. Substituted elements behave differently than ordinary irreplaceable elements (such as div ) when they are absolutely positioned. The following two points from section 10.3.8 of CSS2.1 apply:

• The used "width" value is defined 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 too limited, ignore the value for "left" (in case the "direction" property of the containing block is "rtl") or "right" (in case "direction" is 'ltr') and decide for of this value.

The width of the button is determined not on the basis of the indicated offsets, in contrast to unsigned elements, but on the contents of the button itself. Since the width value used is not automatic, and the left and right values ​​are not automatic, the values ​​are overloaded and the browser is forced to ignore right to respect width .

If you want the button to fill the entire height and width of the wrapper, do not use absolute positioning. Instead, specify 100% height and width on the button and use the registration 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 cannot use box-sizing , subtract the padding from the dimensions of the wrapper.)

The vertical alignment of the text is probably due to the way the browser controls the control buttons by default, which is usually based on the control buttons on the system.

Answer 2

You can use inherit / 100% value for css width and height properties.

 .wrapper { height: 300px; width: 300px; background-color: #f33; padding: 3px; } .wrapper button { width: inherit; height: inherit; } 

Fiddle

NOTE. If you want to measure exactly 300 , then subtract the indentation. (which will be 294px )

Answer 3

You can use calc to get the exact width minus the padding you get from positioning:

 width: calc(100% - 6px); 

Jsfiddle

Answer 4

use below css ..

 .wrapper { height: 300px; width: 300px; background-color: #f33; position: relative; padding: 3px } .wrapper button { position: absolute; top: 0; bottom:0; left:0; right:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; } 

Answer 5

I think you are trying to put a button in the center. You specified the top and left 3px, so no matter what you define, the bottom and right buttons will have 3 pixels on the top and left, ignoring the others. To center the button, use marginFirst to determine the width of the button and set marginLike thia

.

 wrapper button{ Width:100px; margin:0px auto; 

}

no margin does not work with an absolute position.

Answer 6

 .wrapper { height: 300px; width: 300px; background-color: #f33; position: relative; } .wrapper button { position: absolute; top: 3px; bottom: 3px;width:97.5%; right: 3px; } 

Try it.

Answer 7

You need to set the width of the button so that it fills the gap.

The easiest way to do this is to set it to the correct size.

 .wrapper { height: 300px; width: 300px; background-color: #f33; position: relative; } .wrapper button { position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; height: 294px; width: 294px; }