CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
SISYN
SISYN

Reputation: 2269

1px white space surrounding bootstrap tab label

I'm styling some circular bootstrap tab labels but there is a 1px white space surrounding the image inside between it and the border that I cannot seem to get rid of.

I've tried removing padding, margin, and border from elements, but to no avail.

Fiddle

Here is my styling in CSS:

.nav-tabs { border-bottom: none; }

.nav-tabs.circular li,
.nav-tabs.circular li a,
.nav-tabs.circular li img {
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: none;
}

.nav-tabs.circular li {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid transparent;
}

.nav-tabs.circular li.active {
  border-color: green;
}

.nav-tabs.circular li img {
  max-width: 100%;
  max-height: 100%;
}

Upvotes: 0

Views: 404

Answers (1)

dippas
dippas

Reputation: 60603

your issue is from bootstrap.css, check below:

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
  border-width: 1px;
}

so you need to set to 0, see snippet below:

.nav-tabs {
  border-bottom: none;
}
.nav-tabs.circular li,
.nav-tabs.circular li a,
.nav-tabs.circular li img {
  border-radius: 50%;
  padding: 0;
  margin: 0;
  border: none;
}
.nav-tabs.circular li {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid transparent;
}
.nav-tabs.circular li.active {
  border-color: green;
}
.nav-tabs.circular li img {
  max-width: 100%;
  max-height: 100%;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-width: 0 !important; /* !important for demo only */
}
<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.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs circular" id="myTab">
  <li class="active">
    <a href="#recent-match-1" data-toggle="tab">
      <img src="https://merkd.com/usr/members/icons/1458665993.1.png" alt="" />
    </a>
  </li>
  <li>
    <a href="#recent-match-2" data-toggle="tab" title="welcome">
      <img src="https://merkd.com/usr/members/icons/1458665993.1.png" alt="" />
    </a>
  </li>

</ul>

<div class="tab-content">
  <div class="tab-pane fade in active" id="recent-match-1">
    Recent match 1
  </div>
  <div class="tab-pane fade in" id="recent-match-2">
    Recent match 2
  </div>
  <div class="clearfix"></div>
</div>

Upvotes: 2

Related Questions