bootstrap link area smaller on focus and active? - css

Question

I have a thumbnail gallery and each of the <a> elements have an outline around them, when I click on one of the links, the outline is noticeably shorter (only by a pixel or two but enough to be annoying) than the surrounding elements
link to codepen - http://codepen.io/Davez01d/pen/NxMzYy?editors=1100
here's the html -
<div class="row vert-space-30"><!--row-->
<div id="padding-helper"><!--padding-helper-->
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/obyBbz/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/f043ed05-0df8-42b9-a7b3-57ad6cab5f3b_zpsq2074gko.png" alt="Pomodoro thumbnail"/>
<div class="caption">
<h4>Pomodoro Timer</h4>
<p class="tech-used">JavaScript, jQuery, HTML, Css</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/JGvdxX/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/726c239e-157c-4e4d-8931-77f3a4c9de9c_zpslofzlecy.png" alt="Calculator thumbnail"/>
<div class="caption">
<h4>JavaScript Calculator</h4>
<p class="tech-used">JavaScript, jQuery, HTML, Css</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/gPegpd/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/e9b19619-ed3c-4149-ab15-0a039c59f5a7_zps7vmaslo8.png" alt="Quote generator thumbnail"/>
<div class="caption">
<h4>Random Quote Generator</h4>
<p class="tech-used">jQuery, twitter API</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/KVQzwr/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/cc4d40ed-a085-43d6-9dde-90c59161b023_zps0ppintnt.png" alt="Web sketchpad thumbnail"/>
<div class="caption">
<h4>Web Sketchpad</h4>
<p class="tech-used">jQuery, HTML, CSS</p>
</div>
</a>
</div>
</div><!--padding-helper-->
</div><!--row-->
and the css-
.port-tile a {
z-index: 0;
position: relative;
border-radius: 0;
border: none;
padding: 0;
outline: 3px solid #d63c20;
transition: all .12s ease;
}
.port-tile a:hover {
z-index: 10;
outline: 3px solid #d63c20;
transform: scale(1.12, 1.12);
}
.port-tile a:active, a:focus {
outline: 3px solid #d63c20;
}
Also side-note, I'm finding it hard to find a list of all the bootstrap effects on links, buttons, etc, is there a good resource for this? it would help me out a lot.

Answer 1

It's the a:focus { outline-offset: -2px; } that I believe you're referring to, which causes this:
You could override that with your own style, just set
a:focus {
outline-offset: 0;
}
if you don't have a need for this rule at all. Or, target the specific elements where you wish to remove it.