Xóa thêm khoảng trống ở cuối danh sách HTML Mục

Question

Có cách nào để xóa không gian thừa được hiển thị ở cuối thẻ Mục danh sách HTML mà không đặt chiều cao cố định trên mục danh sách không? I.e. Tôi muốn các mục danh sách để bọc vào nội dung của nó.

Mã sau đây hiển thị 3 hình ảnh trong danh sách nằm ngang nhưng chiều cao của mỗi thẻ li lớn hơn hình ảnh 4px. Tôi muốn nó quấn quanh hình ảnh, tức là có cùng chiều rộng và chiều cao. Chiều rộng hiện tại giống nhau nhưng tôi không thể có chiều cao phù hợp.

HTML:

<ul> 
    <li><img alt="img1" src="img1.jpg" /></li> 
    <li><img alt="img2" src="img2.jpg" /></li> 
    <li><img alt="img3" src="img3.jpg" /></li> 
</ul> 

CSS:

li 
{ 
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
    background-color:Yellow; 
} 

Answer 1

Đây là mã của bạn: http://jsfiddle.net/23LcK/

Khoảng cách là không có gì để làm với các li s. Đó là không gian dành riêng cho hậu duệ trong các chữ cái như g và p (vì img s là inline yếu tố).

Bạn có thể loại bỏ nó với bất kỳ những áp dụng cho li img:

• display: block: http://jsfiddle.net/23LcK/1/
• vertical-align với top hoặc bottom: http://jsfiddle.net/23LcK/2/

Answer 2

này nên làm điều đó cho bạn.

ul{margin-bottom:0} 

Answer 3

li được bọc trong ul, theo mặc định có một số đệm. Do đó, như @Michael đã nói, bạn phải loại bỏ phần đệm của phần tử ul.

Để tránh những sự cố này, hãy thử sử dụng reset.css.

FYI: Trình duyệt áp dụng CSS mặc định trên các trang web. Đó là lý do tại sao bạn thấy các phần tử h1 lớn khi không có CSS ​​trong trang web của bạn. Bởi vì trình duyệt có CSS ​​mặc định. Và kể từ khi trình duyệt đến từ các công ty khác nhau, họ có CSS ​​mặc định khác nhau. Ví dụ: một trình duyệt có thể sử dụng 10px lề cho các đoạn văn, trong khi một người dùng trình duyệt khác 12px. Điều này có nghĩa là bạn luôn có mâu thuẫn trong thiết kế của mình. Nhưng việc đặt lại CSS được thực hiện bằng một số quy tắc chung loại bỏ các kiểu CSS mặc định này.

Answer 4

li img { 
    vertical-align: bottom; 
} 

Answer 5

Có thể có lề hoặc đệm mặc định trên phần tử img trong trình duyệt bạn đang sử dụng. Bạn có thể xóa nội dung này bằng cách sử dụng một cái gì đó như thế này:

li img { 
    margin: 0; 
    padding: 0; 
} 

Vì các trình duyệt web khác nhau sử dụng các kiểu mặc định khác nhau nên bạn sử dụng biểu định kiểu đặt lại. Điều này đặt toàn bộ tải nội dung vào các mặc định hợp lý để bạn có được kiểu dáng nhất quán hơn trên các trình duyệt. Vì nó đặt lại mọi thứ về mặc định hợp lý, bạn nên luôn tải biểu định kiểu đặt lại trước bất kỳ bảng định kiểu nào khác.

Như @Saeed đã đề cập có một bản định kiểu đặt lại tốt cũng như thông tin thêm về lý do bạn nên sử dụng chúng here.

Answer 6

Đặt chiều cao dòng: 0; trên LI

li { 
    line-height: 0; 
} 

Dưới đây là một jsfiddle để chứng minh rằng nó hoạt động - http://jsfiddle.net/jm9Tj/