【发布时间】:2014-03-18 09:22:20
【问题描述】:
我有一个 outer div,里面有 3 个嵌套的 div。
第一个里面只有文字,第二个有两个按钮,带有.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;}
【问题讨论】:
标签: html css twitter-bootstrap