Nút neo và nhập liệu HTML có cùng kiểu CSS, nhưng các kích thước khác nhau

Question

Vì vậy, tôi có một lớp nút cơ bản áp dụng cùng một kiểu dáng cho các nút khác nhau trên một trang web.

Tôi đã phải kết thúc việc đặt đầu vào biểu mẫu và thẻ liên kết bên cạnh nhau, chiều cao và chiều rộng của chúng khác nhau. Tôi đã làm cho các nút bên trong văn bản giống nhau trên mỗi một chỉ để hiển thị sự khác biệt như cho như (rõ ràng là tôi không cần 2 'Thêm' nút bên cạnh nhau: P)

Tôi không muốn chỉ định chiều rộng, hoặc chiều cao trong CSS vì nội dung sẽ thay đổi. Ngay cả các font trông hơi khác nhau có kích thước, và từ mô hình hộp có vẻ như padding là alright.

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

Markup

<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: Như bạn có thể nhìn thấy dưới nó không phải là đệm, như các mô hình hộp trong firebug hiển thị đệm là giống nhau cho mỗi cái, do đó, một cái gì đó todo với các yếu tố thực tế chính nó

Làm thế nào để có được cả hai là kích thước tương tự từ một lớp CSS duy nhất trong js fiddle của tôi ở trên?

Answer 1

Đệm được áp dụng khác nhau cho nút và neo. Tôi không biết điều này như là sự thật, nhưng tôi đoán là một nút dự trữ thêm một chút không gian xung quanh giá trị của nó để trông giống như một nút mà một liên kết được hiển thị dưới dạng văn bản.

Bạn có thể thử này:

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

Mà sẽ không được chính xác kích thước tương tự, nhưng khá gần gũi.

Answer 2

Để cân bằng đầy đủ “nút-ish” <a> neo, input và gần đây hơn button, nó là một ý tưởng tốt, để đồng bộ hóa của họ hộp sizings:

input và button vì những lý do lịch sử vẫn đang trong chế độ quirks (đã ở chế độ hiện đại box-sizing: border-box) phần còn lại ở chế độ box-sizing: content-box ...(Một trong hai cách: gotta đặt ở chế độ tương tự hoặc bù đắp cho chiều cao bình đẳng bởi differenciating đệm)

Đây là tiêu chuẩn của tôi “test”, khi tôi bắt đầu làm stylist cho một trang web:

__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__ 

CSS này (trong stylus ký hiệu) là một soạn sẵn tốt:

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 

Live on Codefork