CSS Icons: Không thể loại bỏ trên và dưới đệm (font tuyệt vời)

Question

Đây là fiddle tôi:

http://jsfiddle.net/schmudde/VeA6B/

tôi không thể loại bỏ đầu và đệm đáy ở hai bên của một phông chữ biểu tượng tuyệt vời:

span { 
    border: 1px solid red; 
    line-height: 40%; 
} 
i { 
    border: 1px solid green; 
    padding: 0px; 
    margin: 0px; 
    display: inline-block; 
    width: auto; 
    height: auto; 
    line-height: inherit; 
    vertical-align: baseline; 
    background-color: red; 
} 

<span><i class="icon-check icon-3x"></i></span> 

Tôi đã thử chiều cao dòng cụ thể và kế thừa chiều cao dòng. Có điều gì đó cơ bản ở đây tôi rõ ràng không hiểu.

Answer 1

line-height trên span sẽ không giúp bạn nhiều khi biểu tượng được thêm vào lớp giả :before trên thẻ <i />. Lớp giả này sẽ tạo ra một phần tử hơi ẩn, nếu bạn có thể gọi nó như thế.

Vì vậy, nếu bạn muốn ghi đè các css:

.icon-check:before { font-size: 2rem; } 

Loại bỏ các đệm của biểu tượng có thể được khôn lanh. Có thể nếu bạn đặt span thành display: inline-block bạn có thể sử dụng height, width kết hợp với overflow: hidden.

span { 
    border: 1px solid #FF0000; 
    display: inline-block; 
    height: 38px; 
    overflow: hidden; 
    position: relative; 
    width: 45px; 
} 
i.icon-check:before { 
    left: 0; 
    position: absolute; 
    top: -4px; 
} 

DEMO

Answer 2

Sử dụng span { line-height: 100%; } để nó sẽ lấp đầy khối.

Answer 3

Bạn đặt biên giới trong span, và dòng kế thừa dòng đỉnh cao trong i, đó là vấn đề.

chỉ cần thêm biên giới để i:

span { 
    line-height: 40%; 
    } 
i { 
    border: 1px solid red; 
    border: 1px solid green; 
    padding: 0px; 
    margin: 0px; 
    display: inline-block; 
    width: auto; 
    height: auto; 
    line-height: inherit; 
    vertical-align: baseline; 
    background-color: red; 
    } 

    <span><i class="icon-check icon-3x"></i></span> 

Fiddle