css - 如何避免列间隙空间 - 边距和填充设置为 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 ; 将用于包含由其所有子项组成的 flex 内容的容器。