<button> has excess stock after installing add-ons, fields, borders to 0

Question

The following example shows a <button> element whose height is not the height of the button. What is the best way to remove this excess height while remaining semantic as well as keep the <button> inline?

If I set the display:block button, then the excess height will be removed. If I set the parent font size to 0, it will also be deleted. If I changed the <button> element to a <div> , it will also be fixed. Should I just not be semantic?

I tested this under a stable version of Google Chrome.

 .box { height: 30px; width: 30px; background-color: green; } .outer { background-color: blue; } button { border: 0; margin: 0; padding: 0; } 

 <div class='outer'> <button class='box'></button> </div> 

Answer 1

<button> is an inline-replaced element, so you just need to set the line-height in CSS.

 .box { height: 30px; width: 30px; background-color: green; } .outer { background-color: blue; line-height: 0; } button { border: 0; margin: 0; padding: 0; } 

 <div class='outer'> <button class='box'></button> </div> 

Hope this helps. If you need more help, please comment below.

Answer 2

This problem has occurred because empty text is not displayed, and the baseline makes margin.
You can simply add text to your button, then it will correct the made ones.
Also hardcoded vertical-align should do the trick.

 .box { height: 30px; width: 30px; background-color: green; } .fix { vertical-align: sub; } .outer { background-color: blue; } button { border: 0; margin: 0; padding: 0; } 

 <h5>Initial issue</h5> <div class='outer'> <button class='box'></button> </div> <hr/> <h5>Add a text</h5> <div class='outer'> <button class='box'>+</button> </div> <hr/> <h5>Fix by vertical-align</h5> <div class='outer'> <button class='box fix'></button> </div>