Xóa phần đệm trên cùng và dưới cùng trong phần nhập văn bản trong Chrome/Firefox

Question

Tôi đang cố gắng tạo giao diện giống như văn bản thuần túy. Mục đích là để vẽ một khoảng thời gian, khi người dùng nhấp vào khoảng thời gian nó ẩn và hiển thị đầu vào trông giống như văn bản thuần túy, nhưng có thể chỉnh sửa bởi người dùng.

Trong Chrome và Firefox Tôi không thể thoát khỏi đỉnh và đáy miếng đệm không, ngay cả khi tôi đặt padding và lề CSS tính để 0.

CSS của tôi trông như thế này:

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

Xem phông chữ kích thước được đặt thành 20px. Chrome và Firefox thêm 4px padding-top và padding-bottom, vì vậy đầu vào cao 28px, không phải 20px như mong đợi.

Answer 1

Bạn cần phải đặt lại line-height của yếu tố đầu vào cũng là 20px. Theo mặc định, một số trình duyệt thêm 4px (2 đầu + 2 phần dưới) vào chiều cao dòng của phần tử đầu vào.

Answer 2

Đó có thể là phông chữ của bạn. Hãy thử đặt chiều cao CSS của đầu vào trực tiếp hoặc thử điều chỉnh chiều cao dòng.

Answer 3

Như Diodeus đề xuất, chỉ cần thêm chiều cao vào đầu vào của bạn.

input.myInput { 
    font-family: "segoe ui"; 
    font-size: 20px; 
    height: 20px; 
    padding: 0px; 
    margin: 0px; 
    outline: none; 
    border: 0px; 
    vertical-align: baseline; 
} 

line-height sẽ không làm việc