divを使って作成したHTMLボタンから脂肪を削除する

Question

ボタンとして表示したいリンクがあります。以下は、divのhrefをラップしたコードです。問題は、ボタンがあまりにも "太って"表示されます。テキストの周りの赤を小さくするにはどうすればいいですか？

divの幅を小さくしようとしましたが、テキストを折り返すだけです。

<div style="width: 100px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 10px; padding-bottom: 20px"> 
 
    <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px 18px;"> 
 
            Just do it! 
 
    </a> 
 
</div>

UPDATE

私は何を求めていますが、このスクリーンショットhttp://grab.by/RdFaに示すボタンのようになり、背景色の赤へのテキストの比率です。

Answer 1

だけパディングと幅を調整し、それが今はOK。

<div style="width: 80px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 5px;"> 
 
    <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px;"> 
 
            Just do it! 
 
    </a> 
 
</div>

Answer 2

詰め物の底部を10pxにするだけです。

<div style="width: 100px;background-color:#cc0000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;padding: 10px; padding-bottom: 10px"> 
 
    <a href="" class="font-regular" style="font-size: 14px; font-family: 'Arial Regular', Arial; color: white; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px;padding: 6px 18px;"> 
 
            Just do it! 
 
    </a> 
 
</div>