Các ô bảng lớn hơn chúng có nghĩa là

Question

Tôi đã tạo một hệ thống bản đồ cho trò chơi chạy trên nguyên tắc vẽ hình ảnh bản đồ từ các ô. Có nhiều lý do cho điều này mà tôi sẽ không đi vào đây nhưng nếu bạn thực sự muốn biết sau đó tôi chắc chắn rằng bạn có thể tìm hiểu làm thế nào để liên hệ với tôi;)

Tôi có made the latest version live để bạn có thể thấy chính xác vị trí vấn đề nằm và nguồn. Vấn đề là dòng giữa 2 gạch hàng đầu và gạch dưới cùng 2, tôi không thể tìm ra lý do tại sao nó biến mất như thế này và bất kỳ trợ giúp sẽ được đánh giá cao.

Trong nguồn là một điểm đánh dấu được gọi là "stackoverflow", nếu bạn tìm kiếm "stackoverflow" khi xem nguồn thì nó sẽ đưa bạn đến bảng được đề cập.

Tôi cũng đã tải lên một image of the issue.

Answer 1

Tôi nghĩ bạn cần sử dụng display: block trên hình ảnh của mình. Khi hình ảnh là inline, có thêm một chút khoảng trống cho khoảng cách dòng.

Answer 2

Tôi biết điều này nghe có vẻ không tốt, nhưng bạn cần đảm bảo không có khoảng trống nào giữa thẻ kết thúc của bạn <img> và bắt đầu thẻ kết thúc </td>.

ví dụ: Sau đây sẽ trình bày các vấn đề:

<td> 
<img src="image.jpg"/> 
</td> 

Và điều này sẽ không:

<td><img src="image.jpg"/></td> 

Hy vọng rằng sẽ giúp.

Chỉnh sửa: OK, đó không phải là giải pháp chút nào. doh!

Answer 3

Tôi chưa tra cứu toàn bộ vấn đề, nhưng vấn đề nằm ở đâu đó trong các trang mẫu.

Nếu bạn chỉ sao chép phần bảng, nó sẽ hiển thị chính xác bản đồ.

Nếu bạn loại bỏ các thức </span> thẻ từ phần này, nó cũng đang làm việc (tuy nhiên trang bị hỗn hợp):

<div class="inner"><span class="corners-top"><span></span></span> 
<div class="content" style="font-size: 1.1em;"> 

<!-- Stackoverflow findy thingy --> 
<table border="0" cellspacing="0" cellpadding="0"> 

Vì vậy, hoặc cố gắng từ đầu với css hoặc cố gắng để loại bỏ một-by - một mình, để xem, điều này gây ra vấn đề.

Answer 4

Bạn cũng có thể điều chỉnh chiều cao dòng của phần tử td:

td { 
    line-height: 0 
}