CSSのスタイルは同じでサイズは異なるHTMLアンカーと入力ボタン

Question

同じスタイルをサイトのさまざまなボタンに適用する基本的なボタンクラスがあります。

フォーム入力とアンカータグを隣り合わせに配置しなければならず、その高さと幅が異なります。私は内側のボタンのテキストをちょうど同じような違いを表示するためにそれぞれ同じものにしました（明らかに私は2つの 'Add'ボタンを隣に追加する必要はありません）。

私は幅を指定したくありません。内容としてのCSSの高さが変わります。フォントが少し異なって見えますが、ボックスモデルからはパディングが問題ないようです。それは詰め物ではありません下にあなたがパディングを示して放火犯のボックスモデルとして、見ることができるように：

http://jsfiddle.net/aeD4Z/2/

マークアップ

<form id="" method="POST" action=""> 
<input class="button" type="submit" name="submit" value="Add"> 
</form> 

<a class="button" href="">Add</a> 

CSS

.button { 
    font-family: Arial; 
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent; 
    border: 1px solid #F07605; 
    border-radius: 0.5em 0.5em 0.5em 0.5em; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    color: #FFFFFF; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    line-height: 13px; 
    outline: medium none; 
    padding: 5px 8px !important; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); 
    vertical-align: baseline; 
} 

EDITそれぞれが同じであるため、実際の要素自体で何かをすることになります

どのように私は両方が上記の私のjsバイオリンで、単一のCSSクラスから同じ寸法であることを得るのですか？

Answer 1

パディングは、ボタンとアンカーに異なる方法で適用されます。私はこれを事実として知らないが、私の推測では、リンクがテキストとしてレンダリングされるボタンのように見えるように、ボタンの周りにもう少しスペースを確保していると思う。

あなたはこれを試す可能性があります正確に同じサイズが、かなり近い

a { 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
    padding-left:0px !important; 
    padding-right:0px !important; 
} 

ではありませんどの。 （Quirksモードに残っているの歴史的な理由のため

inputとbutton：

Answer 2

は完全に「ボタンっぽい」<a>アンカー、input最近でbuttonを均等化するために、それは彼らの箱-サイジングを同期させるために、良いアイデアですすでに現代的なモードであるbox-sizing: border-box）残りはbox-sizing: content-boxモードです...（いずれかの方法：同じモードに入れたり、パディングをdifferenciatingことにより、同等の高さを補う奨め）私はサイトのスタイリングを起動したとき

これは、私の標準の「テスト」である：

__AA__ 
<button id='button'>plain Button</button> 
<a class='button' href='#'>plain Anchor</a> 
<a class='button'>linkless Anchor</a> 
<input class='button' type='submit' value='Input Button' /> 
__BB__ 

（ stylus表記）

このCSSは、良好な定型である：

button, a.button, input.button 
    display inline-block 
    font-size 12px 
    font-weight bold 

    color white 
    font-family sans-serif 
    text-decoration none 
    background #24B345 
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that 

    // important to equalize input/button vs. anchor: 
    box-sizing content-box 
    border 4px solid green 
    padding 8px 10px 
    margin 5px 4px 10px 0 

    // some of this is default, 
    // but since input often gets styled elsewhere... 
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus) 
     background: #44D365