<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
quả trong Chrome:làm thế nào để loại bỏ các lề dưới một textarea bên trong một div wrapper (webkit)
loại bỏ ImageShack chết liên kết
quả trong FF:
loại bỏ chết Liên kết hình ảnhShack
Thử hiển thị: chặn trên vùng văn bản:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Vấn đề là văn bản nội tuyến và đang sử dụng chiều cao văn bản để thêm một chút đệm thừa. Bạn cũng có thể chỉ định:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Một tùy chọn khác đó là hữu ích nếu bạn muốn giữ inline textarea và không muốn gây rối với các thuộc tính font khối của cha mẹ (Tôi đề nghị này trong phương pháp trước đó với line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Cuối cùng, nếu bạn thực sự lo lắng về tính nhất quán giữa các trình duyệt, hãy lưu ý lề và những thứ khác có thể được xác định bằng các mặc định khác nhau trong các trình duyệt khác nhau. Sử dụng một cái gì đó như YUI-Reset có thể giúp mang tất cả các trình duyệt mới đến một tiêu chuẩn nhất quán mà từ đó bạn có thể xây dựng.
Nếu bạn muốn giữ kiểu nội tuyến 'hiển thị'