Tenho esta margem (ou padding) estragando meu painel, como faço pra remover? Já tentei várias coisas com CSS, mudando o padding
, a margin
etc, mas nada funcionou.
Esta é margem que quero retirar:
Este é o código (simplificado) que estou usando:
@charset "UTF-8";
label {
display: inline-block;
letter-spacing: 1px;
vertical-align: bottom;
padding: 0;
margin:0;
color: #ffffff;
}
label.dados {
color: #242f62;
letter-spacing: 0;
vertical-align: bottom;
padding: 0;
margin:0;
width: 70%;
font-weight: normal;
}
thead {
background-color: #0e7363;
}
a {
color: #161d3a;
}
.nav-tabs.success > li.active > a,
.nav-tabs.success > li.active > a:hover,
.nav-tabs.success > li.active > a:focus {
background-color: #dff0d8;
border-color: #dff0d8;
}
.nav-tabs.insuccess > li.active > a,
.nav-tabs.insuccess > li.active > a:hover,
.nav-tabs.insuccess > li.active > a:focus
{
background-color: #f2dede;
border-color: #f2dede;
}
.panel-body {
height: 100%;
padding: 0;
margin-bottom: 0;
}
.list-group-item {
padding: 8px;
letter-spacing: 1px;
}
.list-group-item.dadoss {
padding: 3px;
}
.label-primary {
horiz-align: right;
}
ul {
text-align: left;
}
.label-primary {
padding: 10px;
}
p {
font-size: 10pt;
}
.dados2 {
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class=" col-md-2"></div>
<div class="col-md-4">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading" align="center">
Título
</div>
<div class="panel-body">
<ul class="list-group hover">
<li class="list-group-item dadoss"><label class="dados"> Linha 1:</label></li>
<li class="list-group-item dadoss"><label class="dados"> Linha 2:</label></li>
<li class="list-group-item dadoss"><label class="dados"> Linha 3:</label></li>
</ul>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
Preciso que a borda do painel termine junto com a borda do último número da lista.
Update: Estas foram as modificações relevantes que já testei no CSS:
@charset "UTF-8";
.panel-body {
height: 100%;
padding: 0;
margin-bottom: 0;
}
.list-group-item {
padding: 8px;
letter-spacing: 1px;
}
ul {
text-align: left;
padding: 0;
margin-bottom: 0;
height: 100%;
}
. panel-primary {
padding: 0;
margin-bottom: 0;
height: 100%;
}
.panel {
padding: 0;
margin-bottom: 0;
height: 100%;
}
. panel-heading {
padding: 0;
margin-bottom: 0;
height: 100%;
}
Acredito que o problema possa ser um bug por causa da inclusão da lista no panel
, porque quando retiro a lista, o panel fica sem esta margem (ou padding).