StackOverflow : Increasing padding on a span without moving text

http://stackoverflow.com/questions/26000607/increasing-padding-on-a-span-without-moving-text/26001038

by ian_smithz

HTML

<div>Dreamcatcher four loko direct trade freegan, chambray aesthetic brunch plaid. <span class='highlight'>You probably haven't heard</span> of them cliche Pinterest, single-origin coffee pork belly hashtag pop-up Bushwick disrupt blog Vice. Austin lomo Thundercats Brooklyn church-key kogi. Shoreditch mumblecore forage farm-to-table fixie. Wayfarers readymade PBR&B, Marfa disrupt Kickstarter tattooed sustainable pug shabby chic Tumblr craft beer. Before they sold out ugh meggings cray Portland mixtape, messenger bag Odd Future XOXO artisan.</div>

CSS

.highlight {
    background:rgba(255, 255, 0, 0.5);
    font:Helvetica;
    padding:4px 6px;
    margin:0 -9px;
    border:3px solid rgba(0, 0, 0, 0.5);
    border-radius:24px;
}

JavaScript

console.log("loading");

$("div").click( function() {
    $("span").toggleClass('highlight');
})