1

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:

inserir a descrição da imagem aqui

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

2 Respostas 2

1

No seu caso, é só tirar os valores de padding da classe panel-body, então pra ajustar a lista ao painel retirar a margem inferior da mesma, segue o código:

.panel-body {
  padding: 0 !important;
}
.list-group {
  margin-bottom: 0 !important;
}
<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="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>

Caso você queira remover as bordas cinzas da lista e deixar um pouco melhor a visualização, basta usar o seguinte css:

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: none;
}
5
  • Então, mas daí ele só está esmaecendo a cor da borda, eu queria que não tivesse o espaço mesmo...
    – gustavox
    Commented 23/05/2015 às 22:47
  • Você não quer tirar a borda então? Quer tirar o padding? Vou reformular a resposta. Commented 23/05/2015 às 23:59
  • Sim, é o espaço entre a borda do panel e a borda da linha... amanhã vou reformular melhor a pergunta. Valeu!
    – gustavox
    Commented 24/05/2015 às 6:21
  • Editei a pergunta, é a margem (ou o padding, não tenho certeza) que quero retirar. Valeu.
    – gustavox
    Commented 26/05/2015 às 20:46
  • 1
    @gustavox atualizei a resposta, dê uma olhada :) Commented 26/05/2015 às 20:53
1

Tente zerar a borda do panel

.panel-primary {
    border: 0 none;
}
1
  • Editei a pergunta, é a margem (ou o padding, não tenho certeza) que quero retirar. Valeu.
    – gustavox
    Commented 26/05/2015 às 20:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .