如何避免列间隙空间 - 边距和填充设置为0不起作用

Question

当我尝试在firefox中打开简单的测试html时，一切都很好，但是当在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;

设置按钮样式

顺便说一句，display: flexbox;我认为你没有flex这样的事情，但是无论如何都不会有效，因为display: flex;会是包含由其所有子项组成的弹性内容的容器。

Answer 2

关闭，但您的身高和显示类型已关闭

对于你的按钮，它们的高度各为5px短，从而创造了你所看到的抓地力。考虑到您使用它们的方式，它们还需要显示为block类型。

例如，boostrap自动将容器的高度设置为45px，默认高度为40px。这造成了你之前看到的白色空间差距。

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

Working Example