Add padding arround input - css

Question

I'm working on this code. I would like to add some space around this input field:
<span class="theSpan">
<h:inputText id="search" class="input_style" value="#{accounts.searchString}"></h:inputText>
<h:commandButton value="Search by title" action="#{bookBean.searchByTitle(accounts.searchString)}">
<f:ajax execute="search" render="output"></f:ajax>
</h:commandButton>
</span>
CSS:
.input_style {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
/* font-family: Cambria, Cochin, Georgia, serif;*/
/* font-size: 16px;*/
/*background-position: 270px -10px;*/
/* background-image: url('http://www.kirupa.com/images/search.png');*/
background-repeat: no-repeat;
margin-bottom: 30px;
}
.theSpan {
vertical-align: baseline;
}
Visual result:
How can I add some space between the input filed and the table? Also how can I place the text "Search by title" at line line with input field?

Answer 1

Add margin after the input-style
.input_style{
margin-bottom:10px;
}
padding creates space inside the element and margin creates outside the element so you need to use margin.
Coming to "Search by title" use line-height css in this and line-height should be equal to height of input

Answer 2

To put space between two elements use margin (which adds space outside of the borders of your element), not padding (which adds space inside the border of your element).
To vertically align the text next to the input, place it inside of a span element and apply the following CSS to that span.
Since a text field and a span are both inline elements, they should semantically both be placed into a container (block level) element. That is the element that should get the margin applied to it.
.input_style {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
background-repeat: no-repeat;
}
.theButton {
vertical-align: baseline;
}
div { margin-bottom: 30px;
border:1px solid red; /* only here to show the layout */
}
<div>
<input type="text" id="search" class="input_style" >
<button class="theButton">Search By Title</button>
</div>
<div>
This is the next item in the flow of the document.
</div>
Another way to solve this issue is to simply make the button the same
height as the input field, then alignment isn't necessary since both elements are the same height:
/* Note that this rule now applies to the input field and the button */
.input_style, .theButton {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
background-repeat: no-repeat;
}
/* Now we just reset aspects of the button that are different
from the input field */
.theButton {
width:auto;
border:0;
}
div { margin-bottom: 30px;
border:1px solid red; /* only here to show the layout */
}
<div>
<input type="text" id="search" class="input_style" >
<button class="theButton">Search By Title</button>
</div>
<div>
This is the next item in the flow of the document.
</div>

Answer 3

I would wrap your entire block in a div tag. That way you can easily control both the spage around the form and the line height alignment.
Add CSS
.my-form-wraper {
/*set margins, padding, line-height, etc. here ^/
}
And HTML:
<div class='my-form-wraper'>
<h:inputText id="search" class="input_style" value="#{accounts.searchString}"></h:inputText>
<h:commandButton value="Search by title" action="#{bookBean.searchByTitle(accounts.searchString)}">
<f:ajax execute="search" render="output"></f:ajax>
</h:commandButton>
</div>