The vertical position of the a-element and the button element

Question

I want to style the <button> and <a> elements in the same format. I am using the following code:

 button, a { border: solid 1px black; background-color: white; color: black; font-family: 'Arial'; padding: 0 15px; font-size: 13px; height: 35px; line-height: 35px; display: inline-block; } #dummy-block { background-color: black; padding: 0; margin: 0; height: 20px; } 

 <div id="dummy-block"></div> <button>My Button</button> <a>My Link</a> 

But the <button> element seems to ignore the height, and my <a> element does not touch the edge of the black <div> dummy above:

You can check the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/

Answer 1

Try the following: -

 button, a { background-color: white; border: medium none; box-shadow: 0 0 1px #000 inset; color: black; display: inline-block; font-family: "Arial"; font-size: 13px; height: 35px; line-height: 35px; padding: 0 15px; vertical-align: top; } 

Or: -

 button, a { background-color: white; border: medium none; vertical-align:top; color: black; display: inline-block; font-family: "Arial"; font-size: 13px; height: 35px; line-height: 35px; padding: 0 15px; border:1px solid #000; box-sizing:border-box } 

Demo2

Demo

Answer 2

Apparently, the default size selection method for the button is border-box , and for the inline block, content-box . So:

• 35px height means that <a> is actually 37px tall (border adds 2px)
• 35px height means the <button> has a height of 35px (35px includes a border)

Set box-sizing: border-box for both elements.

 button, a { border: solid 1px black; background-color: white; color: black; font-family: 'Arial'; padding: 0 15px; font-size: 13px; height: 35px; line-height: 35px; display: inline-block; box-sizing: border-box; } #dummy-block { background-color: black; padding: 0; margin: 0; height: 20px; } 

 <div id="dummy-block"></div> <button>My Button</button> <a>My Link</a> 

Answer 3

try adding vertical-align: bottom to button, a selector

 button, a { border: solid 1px black; background-color: white; color: black; font-family: 'Arial'; padding: 0 15px; font-size: 13px; height: 35px; line-height: 35px; display: inline-block; vertical-align: top; } #dummy-block { background-color: black; padding: 0; margin: 0; height: 20px; } 

 <div id="dummy-block"></div> <button>Okay</button> <a>Edit</a> 

Answer 4

  a { padding:1px 15px; } button,a { border: solid 1px black; background-color: white; color: black; font-family: 'Arial'; font-size: 13px; height: 35px; line-height: 35px; display: inline-block; } button { padding: 0 15px; }