Grow your CSS skills. Land your dream job.

Most Sensible Way to Make Button and Form Height Match?

  • # May 11, 2013 at 4:13 pm

    [http://codepen.io/anon/pen/DHEko](http://codepen.io/anon/pen/DHEko “”)

    Obviously, I could just manually set the height on each – but it would be nice for the heights to adjust to matching automatically if I change the font size.

    Is there a way to achieve this without using javascript to expand height within the div?

    # May 11, 2013 at 6:43 pm

    Set the height in ems?

    # May 15, 2013 at 7:24 pm

    Doesn’t seem to be working. [http://codepen.io/anon/pen/DHEko](http://codepen.io/anon/pen/DHEko “”)

    # May 16, 2013 at 12:22 am

    Form field rendering is darn inconsistent. Firefox makes the button 2px too high, Chrome instead makes it a few pixels smaller in both width and height.

    Anyway, this should give somewhat consistent results: http://codepen.io/Merri/pen/uHzls

    It looks identical in Firefox, Chrome, IE10 and Opera 12, but it uses one magic number hack thanks to Chrome.

    # May 16, 2013 at 5:47 am

    Have you tried `box-sizing: border-box` to make them look identical? I’ve made some test once and posted results somewhere (I thought as comment in issue tracker for normalize.css but can’t find it again), but border-box seemed to fix inconsistencies in addition to usual normalize stuff.

    # May 16, 2013 at 6:46 am

    That’s a nice way to make button and form height match in CSS. I don`t like the way in HTML.

    # May 16, 2013 at 8:33 am

    @CrocoDillon: I see no difference atleast in Firefox with that.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".