html - 如何删除 Bootstrap 样式按钮和表格之间的空间？

Question

我有一个 outer div，里面有 3 个嵌套的 div。

第一个里面只有文本，第二个有 2 个带有 .btn .btn-primary .btn-xs 和 `.btn .btn-danger

的按钮

第三个 div 只进入了一个带有 .table .table-condensed 的表格。

但是我在按钮 div 和表格之间有一个不需要的空间，我试过使用 margin 和 padding 规则，也试过 !important 但没有得到结果。

它是这样的:

可以看出，两个按钮和下面的表格之间有一个空格。

这是标记:

<div id="outer">
            <div id="parametros">
                <div id="tituloParametros"><span>Ingresa los puntos conocidos x,f(x)</span></div>
                <div id="botonesTabla">
                        <button type="button" id="btnAgregarPunto" class="btn btn-primary btn-xs">+</button>
                        <button type="button" id="btnEliminarPuntos" class="btn btn-danger btn-xs">Borrar</button>
                </div>
                <div id="divTablaParametros">
                    <table id="tablaParametros" class="table table-condensed"></table>
                </div>
                <input type="text" class="input-medium" placeholder="Aproximar" id="a">
                <button id="ok" type="button" class="btn btn-success btn-md">
                    <span class="glyphicon glyphicon-check"></span> Calcular y graficar
                </button>

            </div>

        <div id="resultados">
            <div id="graficos">
                <div id="bars" class="barslagrange"></div>
                <div id="fx" class="fxlagrange"></div>
                <!--<div id="pinchetabla" class="pinchetabla">Tabla inútil</div>-->
            </div>
            <div id="loquerealmenteimporta"></div>  
        </div>

    </div>

这是 CSS 文件:

#argumentos {

  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 100px;
  background-color: #0080FF;
  color: white;
  font-weight: bold;
}

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
  text-align: center;
  padding-right: 5px;
  background-color: #F8F8F8;
}
      #tituloParametros {
        height: 9%;
        width: 100%;
        text-align:center;
        display: table;
      }
      #tituloParametros > span {
        display: table-cell;
        vertical-align: middle;
        font-weight: bold;
      }

      #botonesTabla {
        text-align: right;
        height: 15%;
        width: 100%;
        margin-top: 3px !important;
        margin-bottom: 2px !important;
        padding-bottom: 3px !important;
      }
      #divTablaParametros {
        margin-top: 1px !important;
        padding-top: 2px !important;  
        height: 40%;
        width: 100%;
        padding-left: 10px;
        padding-right: 7px;
        overflow-y: scroll;
      }

      .punto {
        color: black !important;
      }

      #a {
        font-weight: bold;
      }

      #ok {
        margin-top: 10px;
        font-weight: bold;
      }



#resultados {
  float:right;
  width: 80%;
  height: 100%;
  padding-left: 10px;
}

      #graficos {
        height: 75%;
        width: 100%;
      }

          .barslagrange {
            float: left;
            height: 100%;
            width: 65%;
          }

          .barsdiferencias {
            float: left;
            height: 100%;
            width: 37%;
          }          

          .fxlagrange {
            float: left;
            height: 100%;
            width: 35%;
          }

          .fxdiferencias {
            float: left;
            height: 100%;
            width: 23%;
          }                     

          .pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
            background-color: orange;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }


.navbar {margin-bottom:0px !important;}

.table-bordered {font-size: 11px;}
.table {font-size: 11px;}
.btn-argumentos {width: 350px; font-weight: bold !important;}

Answer 1

高度:15%; 在 #botonesTabla 上。你明确告诉它有一个高度，边距和填充不会改变它，改变它的高度。