CSSの背景画像を持つボタンに余白をどのように追加しますか？

Question

検索アイコンの背景画像を持つボタンがありますが、margin-bottomを追加して、テキスト領域をボタンに合わせることができません。なぜボタンにmargin-bottomを追加しても何もしませんか？または、テキストエリアをボタンに合わせる正しい方法は何ですか？

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    margin-bottom: 10px; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

Answer 1

手動で第二の要素を配置することができるようにしたい場合は、私は否定的topと一緒にposition: relativeを使用することをお勧めします。正確画像が座る場所上、これは、完全な制御を可能にする：

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    position: relative; 
 
    top: -11px; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

代わりに、2番目の要素vertical-align: topを与えることによって、上部の2つの要素を整列させることができます。これは、イメージの上部をテキストエリアの上部に揃えますが、要素の高さが異なる場合（例のように）、問題を引き起こす可能性があります。

しかし、あなたのイメージを考慮することはほとんどないその境界からオフセットされ、あなたは1行のコードを保存するには、このアプローチを使用することを選ぶことが：

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    vertical-align: top; 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

・ホープ、このことができます！ :)

Answer 2

あなただけの両方<textarea>と<button>インラインブロックので、あなたは垂直整列を使用することができますすることができます：真ん中両方の要素が垂直方向に中央揃えにするであろう。

textarea { 
    display: inline-block; 
    vertical-align: middle; 
} 

.parse-text-button { 
    display: inline-block; 
    verical-align: middle; 
} 

また、両方の要素の不要な余白をすべて削除してください。実際にそこ

Answer 3

を助け

希望は下の余白であるが、そのアイコンとテキストエリアの下に延びる - あなたは要素インスペクタで、それをチェックすると、あなたがそれを見ることができます。

あなたが本当に知りたいのは、ボタンが下部に揃うのを止める方法だと思います。

vertical-alignを使用すると簡単に調整できます。たとえば、

.input-area { 
 
    width: 100%; 
 
    height: 46px; 
 
} 
 

 
.parse-text-button { 
 
    background: url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
 
    width: 24px; 
 
    height: 24px; 
 
    border: none; 
 
    vertical-align: top; /* align to the top */ 
 
    margin-top: 4px; /* add a little extra space to the top for 'padding' */ 
 
}

<div class="input-area"> 
 
    <textarea class="input" placeholder="Enter text here"></textarea> 
 
    <button class="parse-text-button" type="submit"></button> 
 
</div>

Answer 4

使用ここで垂直整列

.parse-text-button { 
    background: 
    url(https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png) no-repeat; 
    width: 24px; 
    height: 24px; 
    border: none; 
    margin-bottom: 10px; 
    vertical-align:top; 
} 

Answer 5

溶液

.stylish-input-group .input-group-addon{ 
 
    background: white !important; 
 
} 
 
.stylish-input-group .form-control{ 
 
\t border-right:0; 
 
\t box-shadow:0 0 0; 
 
\t border-color:#ccc; 
 
} 
 
.stylish-input-group button{ 
 
    border:0; 
 
    background:transparent; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
\t <div class="row"> 
 
     <div class="col-sm-6 col-sm-offset-3"> 
 
      <div id="imaginary_container"> 
 
       <div class="input-group stylish-input-group"> 
 
        <input type="text" class="form-control" placeholder="Search" > 
 
        <span class="input-group-addon"> 
 
         <button type="submit"> 
 
          <span class="glyphicon glyphicon-search"></span> 
 
         </button> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
\t </div> 
 
</div>