Reputation: 2269
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.
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
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