Khoảng cách giữa hai divs

Question

Vấn đề của tôi là tôi có hai (hoặc nhiều hơn) div của cùng một lớp, cần phải cách nhau. Tuy nhiên, tôi không thể trực tiếp sử dụng lợi nhuận, vì phần tử cuối cùng hoặc đầu tiên cũng sẽ được áp dụng mức ký quỹ mà tôi không muốn.

-Green là nơi tôi muốn không gian
-Red là nơi tôi không muốn nó

Là giải pháp duy nhất tôi có thể nghĩ đến là phức tạp/liên quan đến hard-coding một giá trị, tôi Tôi hy vọng rằng ai đó có thể nghĩ ra một giải pháp thông minh, đơn giản cho vấn đề này.

Chi tiết: Đôi khi những div này sẽ là của chính họ và trong một dịp hiếm hoi trôi nổi.

Bất kỳ lời khuyên về cách trên ý tưởng có thể được tốt hơn, bất kỳ ý tưởng mới, hay chỉ giúp nói chung sẽ được đánh giá rất nhiều;)

Answer 1

Bạn có thể thử một cái gì đó như sau:

h1{ 
    margin-bottom:<x>px; 
} 
div{ 
    margin-bottom:<y>px; 
} 
div:last-of-type{ 
    margin-bottom:0; 
} 

hoặc thay của quy tắc h1 đầu tiên:

div:first-of-type{ 
    margin-top:<x>px; 
} 

hoặc sử dụng tốt hơn adjacent sibling selector. Với bộ chọn sau đây, bạn có thể bao gồm trường hợp của bạn trong một quy tắc:

div + div{ 
    margin-bottom:<y>px; 
} 

Tương ứng, h1 + div sẽ kiểm soát div đầu tiên sau khi tiêu đề của bạn, đem lại cho bạn nhiều lựa chọn phong cách bổ sung.

Answer 2

Tại sao không sử dụng ký quỹ? bạn có thể áp dụng tất cả các loại lợi nhuận cho một phần tử. Không chỉ toàn bộ lợi nhuận xung quanh nó.

Bạn nên sử dụng các lớp học css vì đây là tham khảo nhiều hơn một phần tử và bạn có thể sử dụng id cho những người mà bạn muốn trở thành khác nhau đặc biệt

ví dụ:

<style> 
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; } 
#first { margin-top: 20px; } 
#second { background: #00F; } 
h1.box { background: #F00; margin-bottom: 50px; } 
</style> 

<h1 class="box">Hello World</h1> 
<div class="box" id="first"></div> 
<div class="box" id="second"></div>​ 

Dưới đây là một ví dụ jsfiddle:

• http://jsfiddle.net/baXmu/2/

THAM KHẢO:

• http://www.html.net/tutorials/css/lesson10.php

Answer 3

Nếu bạn không yêu cầu hỗ trợ cho IE6:

h1 {margin-bottom:20px;} 
div + div {margin-top:10px;} 

Dòng thứ hai cho biết thêm khoảng cách giữa các div, nhưng sẽ không thêm bất kỳ trước khi div đầu tiên hoặc sau lần cuối cùng.

Answer 4

DIV vốn không có bất kỳ ý nghĩa hữu ích nào, ngoài việc phân chia, tất nhiên.

Khóa học hành động tốt nhất là thêm tên lớp học có ý nghĩa vào chúng và tạo kiểu cho từng lề trong CSS.

<h1>Important Title</h1> 
<div class="testimonials">...</div> 
<div class="footer">...</div> 

h1 {margin-bottom: 0.1em;} 
div.testimonials {margin-bottom: 0.2em;} 
div.footer {margin-bottom: 0;}