我有outer
div
,里面有3个嵌套的div。
第一个只有里面的文字,第二个有.btn .btn-primary .btn-xs
的两个按钮和`.btn .btn-danger
第三个div只能进入一个.table .table-condensed
的表格。
但是我在按钮div和table之间有一个不需要的空间,我尝试过使用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;}
答案 0 :(得分:1)
height: 15%;
上的 #botonesTabla
。你特别告诉它有一个高度,边距和填充不会改变它,改变它的高度。