カラムギャップスペースを避ける方法 - マージンとパディングを0に設定しても動作しない

Question

簡単なテストhtmlをFirefoxで開こうとすると、すべてうまくいくが、Chromeやモバイルデバイスで開くと、列間。 なぜ誰が理解していますか？

これを解決する方法があれば、本当に感謝しています。問題は、Firefoxとはうまく動作しますが、Chromeとモバイルデバイスはこれをオブジェクトとして認識しません。

<div class="container"> 
    <div class="col-md-4 col-xs-4" style=" padding:0 !important; 
    margin:0 !important; 
    border:1px solid; 
"> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="11" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="12" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="13" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="14" class="button" type="button" style=" background-color:green; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="15" class="button" type="button" style=" background-color:greeen; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="16" class="button" type="button" style=" background-color:green; 
    height:160px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="17" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-10 col-xs-10" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="18" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
     <div class="col-md-1 col-xs-1" style=" padding:0 !important; 
    margin:0 !important; 
"> 
      <button id="19" class="button" type="button" style=" background-color:green; 
    height:40px; 
    width:100%; 
    border:none; 
    display:flexbox; 
    padding:0 !important; 
    margin:0 !important; 
"></button> 
     </div> 
    </div> 
</div> 

Answer 1

ボタンネイティブインライン要素です。したがって、文章中の単語のように、右下にスペースがあります。

簡単にあなただけちなみにdisplay: block;

とボタンのスタイルを設定する必要があり、この問題を解決するには、私はあなたがflexを考えていたが、display: flex;は、Aのためになるので、それはとにかく動作しないだろうと思うdisplay: flexbox;ようなものはありませんすべての子要素で構成されるフレックスコンテンツを含むコンテナです。

Answer 2

閉じるが、あなたの高さとディスプレイの種類はあなたのために

オフしたボタンその高さは、このようにあなたが見たそのグラブを作成し、各5px短かったです。彼らはまたあなたがそれらを使用していた方法を考慮してタイプblockとして表示する必要がありました。

たとえば、boostrapは自動的にコンテナの高さを45pxに設定していて、その高さはデフォルトで40pxでした。これはあなたが以前に見た空白の隙間にギャップを作りました。

button { 
height: 45px; 
display: block; 
} 

Working Example