Làm cách nào để đặt khoảng trống dọc giữa các mục danh sách?

Trong một <ul>phần tử, có thể định dạng rõ ràng khoảng cách dọc giữa các dòng bằng thuộc tính line-height.

Câu hỏi của tôi là, trong một <ul>phần tử, làm cách nào để đặt khoảng cách dọc giữa các mục danh sách?

Bạn có thể sử dụng ký quỹ. Xem ví dụ:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

CHỈNH SỬA: Nếu bạn không sử dụng trường hợp đặc biệt cho phần tử li cuối cùng, danh sách của bạn sẽ có một khoảng cách nhỏ sau đó mà bạn có thể xem tại đây: http://jsfiddle.net/wQYw7/

Bây giờ so sánh điều đó với giải pháp của tôi: http://jsfiddle.net/wQYw7/1/

Chắc chắn điều này không hoạt động trong các trình duyệt cũ hơn nhưng bạn có thể dễ dàng sử dụng các tiện ích mở rộng js sẽ kích hoạt điều này cho các trình duyệt cũ hơn.

Tôi sẽ nghiêng về điều này mà có được sự hỗ trợ của IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Thêm một marginvào lithẻ của bạn . Điều đó sẽ tạo ra khoảng cách giữa livà bạn có thể sử dụng line-heightđể đặt khoảng cách cho văn bản trong các lithẻ.

Nhiều khi khi tạo ra các email HTML, bạn không thể sử dụng các biểu định kiểu hoặc các khối kiểu / kiểu. Tất cả CSS cần phải được nội tuyến. Trong trường hợp bạn muốn điều chỉnh khoảng cách giữa các dấu đầu dòng, tôi sử dụng li style = "margin-bottom: 8px;" trong mỗi mục đầu dòng. Tùy chỉnh giá trị pixel theo ý thích của bạn.

Để áp dụng cho toàn bộ danh sách, hãy sử dụng

ul.space_list li { margin-bottom: 1em; }

Sau đó, trong html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

đặt padding-bottom cho mỗi danh sách bằng cách sử dụng lớp giả là một phương pháp khả thi. Ngoài ra chiều cao dòng có thể được sử dụng. Hãy nhớ rằng các thuộc tính phông chữ như font-family, Font-weight, v.v. có vai trò đối với độ cao không đồng đều.

<br>giữa <li></li>các mục nhập dòng dường như hoạt động hoàn toàn tốt trong tất cả các trình duyệt web mà tôi đã thử, nhưng nó không vượt qua được trình kiểm tra W3C CSS3 trực tuyến. Nó cho tôi biết chính xác khoảng cách dòng mà tôi đang theo đuổi. Theo như tôi lo ngại, vì nó chắc chắn hoạt động, tôi đang kiên trì sử dụng nó, bất cứ điều gì W3C nói, cho đến khi ai đó có thể đưa ra một giải pháp thay thế hợp pháp tốt.