css - 在输入周围添加填充

Question

我正在处理这段代码。我想在此输入字段周围添加一些空间:

 <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;
}

视觉效果:

如何在输入字段和表格之间添加一些空间？另外，如何将文本“按标题搜索”放置在带有输入字段的行中？

Answer 1

在输入样式后添加边距

.input_style{
  margin-bottom:10px;
}

padding creates space inside the element and margin creates outside the element so you need to use margin.

“按标题搜索”在此使用 line-height css，line-height 应等于输入的高度