Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Greg Kaleka
Greg Kaleka
39,021 Points
Posted by Greg Kaleka
Greg Kaleka
39,021 Points

Need help fixing a small alignment issue - can't figure it out!

Hi all,

Any ideas on why the heights of the text input and submit button are not the same? I've explicitly set them each to 37px, but the button appears 2px shorter. If I set its height to 39px and leave the text input at 37px, it looks perfect. I've tried setting padding-top and padding-bottom to 0 for both, but that does not help. Both are set to border:none. What's going on?

Thanks!

http://codepen.io/anon/pen/JdBryj?editors=110

pertinent.html 
<div id="optin">
    <form action="." method="post">
        <input type="text" name="email" id="email" value="" placeholder="email address">
        <input type="submit" value="Sign up">
    </form>
</div>
pertinent.css 
#optin {
  height: 37px;
}

form {
  margin-bottom: 0;
  margin-right: auto;
  margin-left: auto;
  max-width: 95%;
}

form input[type="text"] {
  height: 37px;
  border: none;
  font-size: .7em;
  width: 210px;
  padding-left: 10px;
  margin: 0 -4px 0 0;
  border-radius: 4px 0 0 4px;
}

form input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
  width: 90px;
  height: 37px;
  text-align: center;
  border: none;
  background: #FF6800;
  color: #FFF;
  -webkit-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  vertical-align: middle;
}

2 Answers

miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

I think the issue here is the box-sizing property is different for both inputs. I changed the box-sizing for the inputs and removed top padding for the input field.

http://codepen.io/anon/pen/WvKZWa

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Yesssss perfect - thanks Miguel!

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You have one pixel of padding on the top and bottom of the text input. Add padding:0; above padding-left:10px;

form input[type="text"] {
  height: 37px;
  border: none;
  font-size: .7em;
  width: 210px;
/* here */
  padding: 0;
  padding-left: 10px;
  margin: 0 -4px 0 0;
  border-radius: 4px 0 0 4px;
}