Geek Answers Handbook

<button> fill / width issue

I use <button> to submit a request on the form. I also created a a.button just like <button> (I need a.button to do some JS stuff).

The button has padding, a fixed height. When I specify the width of the / a button, they look the same. But when I add the width to <button> , it ignores the addition.

I have this problem in Chrome, Firefox and Opera, so I think this is not a rendering error. Also the same problem with <input type="submit" />

Here is the basic CSS:

 .button, button { margin: 0; display: inline-block; border: 0; text-decoration: none; cursor: pointer; color: black; background: #ddd; font: 12px Verdana; padding: 40px; /* 40px, so you can see that it won't be rendered with width */ text-align: center; }

HTML:

 <a href="#" class="button">Some text</a> <button>Some text</button> <!-- Works fine till here --> <br /><br /> <a href="#" class="button" style="width:200px">Some text</a> <button style="width:200px">Some text</button>

Fiddle: http://jsfiddle.net/9dtnz/

Any suggestions on why browsers ignore padding? (top and bottom when using height / left and right when using width).

+8
css padding width rendering
source share
2 answers

Very strange, I saw that my Chrome has a box-sizing: border-box; rule box-sizing: border-box; for input elements, so padding is added in width ...

Therefore, to avoid this, simply specify box-sizing: content-box; (some prefix may be required).

+20
source share

I'm fine, so this could be a conflict issue in style. Try to use! It is important to redefine everything that may be, and this may solve your problem.

 .button, button { margin: 0; display: inline-block; border: 0; text-decoration: none; cursor: pointer; color: black; background: #ddd; font: 12px Verdana; padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */ text-align: center; }

Hope this helps.

Michael.

0
source share

More articles:


All Articles