Remove blank space between tab-pane and contents

Question

I would like to remove the blank space between menu and tab-pane of the page.

My result:

.nav-tabs>li>a {
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a {
  margin-top: 1px;
}

.nav-tabs>li {
  margin-bottom: 0px;
}

.nav-tabs>li.active {
  margin-bottom: -10px;
}

div.tab-pane {
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  padding: 0px;
}

div.tab-content {
  border: 0px solid #ddd;
  border-radius: 0px;
  padding: 0px;
}

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#inicio" data-toggle="tab">Inicio</a></li>
    <li><a href="#sistema" data-toggle="tab">Sistema</a></li>
    <li><a href="#programas" data-toggle="tab">Programas</a></li>
  </ul>

  <div class="tab-content">
    <div style="background-color: #00BABE;">
      ......................................
    </div>

Remove the margin from the UL, so on the .nav {} or .nav-tabs do { margin: 0 } — Tom, Feb 07 '20 at 14:40
answer posted below ; don't forget to use developper tools on firefox or chrome, as you can update css on the fly and see what's wrong — Pierre, Feb 07 '20 at 14:41
This could come from many places, but the answers and comments are probably correct that this is your UL's bottom margin. Additionnally, if you use your browser's developer tools to debug it would be immediately obvious as the margins would be "colored" as well as the padding and borders. — Laurent S., Feb 07 '20 at 14:43

score 0 · Answer 1 · answered Feb 07 '20 at 14:40

0

You have to set margin-bottom:0 on your UL !

answered Feb 07 '20 at 14:40

Pierre

643
1
7
14

score 0 · Accepted Answer · answered Feb 07 '20 at 14:41

0

it's possible to be the margin from ul default style

try

.nav {
  margin: 0
}

answered Feb 07 '20 at 14:41

Lincon Kusunoki

191
1
6

While the last semi-column is not mandatory and actually useless, I find it a bad practice to leave it out... – Laurent S. Feb 07 '20 at 14:51
@LaurentS. Better for optimisation to leave it the last semi-colon out, if you don't use a post processor. – BritishSam Feb 07 '20 at 15:07
@BritishSam This is a very bad practice, prone to further errors when maintaining the code (adding a property after this one and with a very minimal gain on load times. The pro's and con's of it are discussed in several questions on SO. In addition, with the example given in the answer, you would actually gain more by removing carriage returns and indentation. If you're looking at the best optimization, use a pre-processor. I would certainly not advise this to a beginner, especially without any additional mention of it. Will it break? no. Is it a good idea? I don't think so. – Laurent S. Feb 07 '20 at 15:21
Tks a lot man! Works well! – Joel Martinez Feb 07 '20 at 16:25

DadyByte · Answer 3 · 2020-02-07T15:00:07.137

0

add this in css

ul {
  margin: 0px;
}

edited Feb 07 '20 at 15:00

answered Feb 07 '20 at 14:47

DadyByte

894
6
18
30

Remove blank space between tab-pane and contents

3 Answers3