Tạo khoảng trắng giữa đoạn (x) html, css

Question

Tôi muốn khoảng cách giữa các thẻ <p>content</p> của mình. Không phải trước và không sau <p> thẻ. Fx mã của tôi là:

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p>Some text</p> 
</div> 
Something 

Tôi không muốn khoảng trống giữa h1 và p được thực hiện với lề không trên h1. Nhưng tôi không muốn không gian sau thẻ <p> cuối cùng. Điều này có thể không có: con cuối cùng hoặc một số js/jQuery?

Tôi không thể đặt class = "last" trên thẻ cuối cùng vì nó là hệ thống CMS.

Answer 1

p + p { 
    margin-top: 1.5em; 
} 

(Mặc dù điều này đòi hỏi một trình duyệt với sự hỗ trợ tốt hơn cho CSS hơn IE6)

Answer 2

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <div class="paragraph-space"></div> 
    <p>Some text</p> 
</div> 

?

Answer 3

Đặt lề dưới mặc định thành p, sau đó cung cấp thẻ cuối cùng cho một lớp không có lề dưới.

Answer 4

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p style="margin-bottom: 0;">Some text</p> 
</div> 

Answer 5

Nếu bạn không yêu cầu hỗ trợ IE6 bạn có thể sử dụng:

div, h1, p { margin: 0; } 
p + p { margin-top: 12px; } 

Nếu bạn cần phải hỗ trợ IE6, đây là một hack bẩn nhưng nó hoạt động mà không có Javascript:

div, h1, p { margin: 0; } 
h1 { margin-bottom: -12px; } 
p { margin-top: 12px; } 

Điểm bất lợi của phương pháp này là bạn không thể đơn giản sử dụng, giả sử, 1em cho các lề cân bằng khi chúng có kích thước phông chữ khác nhau. Bạn có thể điều chỉnh thủ công theo yêu cầu hoặc sử dụng độ rộng pixel.

Answer 6

Nếu bạn muốn làm cho nó duyệt hơn tương thích, bạn cũng có thể sử dụng:

p { margin-top: 24px; } 
h1 { margin-bottom: -24px; } // play with this value as necessary 

lề âm sẽ kéo các yếu tố về phía họ. It's messier hơn tôi thích, nhưng khi bạn đang ở lòng thương xót của CMS tạo ra mã không có cách nào để thêm các lớp học, bạn phải sáng tạo.