CODEWITHSUNDEEP
htmltwitter-bootstrapcss
sebko
sebko

Reputation: 545

input and button misalignment

I'm trying to align an input box and button.

Without bootstrap css framework it works fine, however, when I add bootstrap the search button is misaligned.

.container{
    height: 120px;
}
input, button{
    height: 100%;
}

https://jsfiddle.net/1am8uqwu/1/

I've figured out some fixes, but I wanted to understand the fundamentals of why this is happening.

My Fixes:

  1. I found the fix below particularly interesting, as the input and button elements have no padding to begin with. lolwut?

    input, button{
  margin: 0;
  padding: 0;
}

  2. .

    input, button{
  vertical-align: middle or top
}

*Note the misalignment is subtle

Upvotes: 1

Views: 850

Answers (2)

Shawn Chambless
Shawn Chambless

Reputation: 66

The button seems to have default padding, and lines up with the input box when its padding is set to 0.

https://jsfiddle.net/1am8uqwu/14/

*{
    box-sizing: border-box;
}

.container{
    height: 120px;
}

input, button{
    height: 100%;
}

button {
    padding: 0;
}

Upvotes: 3

Spade
Spade

Reputation: 591

You have your button and input wrapped around a .container div element.

With bootstrap this causes the below styles to be applied: 

.container { 
margin-right: auto;
margin-left: auto;
}

Thus centering the content inside of the container with the auto attribute. Without bootstrap the style is not applied and the content it not centered.

View the docs for more info: http://getbootstrap.com/css/#overview-container

Upvotes: 0

Related Questions