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

I have an outer div, inside it I've got 3 nested divs.

我有一个外部div,在里面我有3个嵌套的div。

First one only got text inside, second got 2 buttons with .btn .btn-primary .btn-xs and `.btn .btn-danger

第一个只有文本里面,第二个有2个按钮.btn .btn-primary .btn-xs和`.btn .btn-danger

Third div only got inside a table with .table .table-condensed.

第三个div只在一个带有.table .table-condensed的表中。

However I've got an unwanted space between buttons div and table, I've tried using margin and padding rules, also tried out !important but got not results.

但是我在按钮div和table之间有一个不需要的空间,我尝试过使用margin和padding规则,也试过了!重要但没有得到结果。

This is how it looks like:

这是它的样子:

As it can be seen there's a space between the two buttons and the table below.

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

This is the markup:

这是标记:

<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>

And this is the CSS file:

这是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;}

1 个解决方案

#1

height: 15%; on #botonesTabla. You are specifically telling it to have a height, margins and padding won't change that, change its height.

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