Home/ Questions/Q 8257161
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T02:06:21+00:00

I have the following padding: padding:12px 24px; for input button and label for checkbox.

  • 0

I have the following padding: padding:12px 24px; for input button and label for checkbox.
Font is set in body 16px Arial, all other font sizes inherited. border:0; for all elements. Why do browsers add 1px to button’s height? So if label’s height is 42px – button’s height is 43px. This happens in Chrome and Firefox.

How to make the same height for buttons and labels?

enter image description here
enter image description here

Part of code

<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label>
<input type='submit' value='Sign in' id='signin-button' /> (in the HTML form)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure, but it probably comes down to line-heights of the fonts and how they’re handled in different elements in HTML.

    Try forcing a height with CSS like so:

    #signin-button { height: 42px!important; border: none!important; overflow: hidden; }

    I’m usually against setting exact heights for elements as a general rule, but for this case, it might just do the job and be appropriate.

    Good luck.

    • 0