khoảng cách Fix xuất hiện trên một yếu tố LI khi sử dụng: sau khi

Question

Hãy xem tại fiddle này http://jsfiddle.net/EWUTX/

Đây là những phong cách được sử dụng:

.box { position: relative; display:inline-block;} 
.box:after { 
    position: absolute; 
    width: 100%; 
    height: 10px; 
    background: green; 
    content: ''; 
    bottom:-10px; 
    left:0; 
} 

tôi nhận được một nhỏ khoảng cách 5px khi sử dụng phong cách trên một yếu tố li, nhưng không phải trên một thẻ div.

Nếu tôi chỉ định f ont-size: 0px, khoảng cách sẽ biến mất. Nhưng sau đó tất cả các văn bản trong các li biến mất.

Khi kích thước phông chữ của số tăng li tăng, khoảng cách sẽ mở rộng.

Có cách nào để loại bỏ khoảng trống này, không có bất kỳ mã hóa cứng nào về kích thước phông chữ không?

Fiddle một lần nữa: http://jsfiddle.net/EWUTX/

Cảm ơn

PS: Tôi đang thực sự xây dựng một khuôn khổ CSS trong nội bộ mà người sử dụng có thể xác định trạng thái (sử dụng lớp) như "started", "not-started", vv

Khi được sử dụng, phần tử sẽ hiển thị một thanh nhỏ bên dưới với các màu khác nhau. Người dùng có thể sử dụng lớp này trên bất kỳ phần tử nào.

Answer 1

Khoảng cách đó là một phần của các ký tự dành riêng cho độ cao dòng như chữ 'p'. Bạn sẽ nhận được khoảng trống tương tự nếu bạn không đặt chiều cao cho div của mình. Nếu bạn muốn loại bỏ từ một phần tử nội tuyến như một img bạn có thể đặt thẳng đứng-align cho phía dưới:

.box img { 
    vertical-align: bottom; 
} 

Xem: http://jsfiddle.net/DhTzp/

Answer 2

của hình ảnh mà thùng khoảng trắng;

img{ display: block; }