Cách xóa khoảng cách dọc không mong muốn giữa các số div

Question

Tôi đã gặp phải một chút rủi ro khi phát triển giao diện người dùng cho một trang web. Tôi có thẩm quyền với CSS, nhưng không tuyệt vời. Dù sao, tôi đã tạo ra một jsFiddle here minh họa vấn đề của tôi.

Trên mỗi trang trong trang web của tôi, ở đầu phần nội dung, tôi có hình ảnh biểu ngữ. Tôi muốn đặt một bộ chia hai màu tách riêng biểu ngữ này ra khỏi nội dung. (Như được hiển thị trong mô hình mà nhà thiết kế của tôi đã cho tôi: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

Tôi muốn làm điều này trong CSS + HTML thuần túy, mà không cần phải nhét hình ảnh. Dù sao, tôi đã làm như vậy bằng cách sử dụng đoạn mã sau:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

(Xin hãy tha thứ CSS nội tuyến, nó chỉ nhằm mục đích minh họa. Ngoài ra, không may, nếu tôi đặt div thứ hai trên một dòng mới và indent nó, nó tạo ra khoảng trắng)

vấn đề tôi có là có một khoảng cách lớn giữa bộ chia và hình ảnh. Tôi đã thử thêm lề: 0px và đệm: 0px cho tất cả các phần tử có liên quan và khoảng trắng vẫn còn đó.

Ai đó có thể giúp tôi không?

Cảm ơn, YM

Answer 1

Với tôi đó là vấn đề căn chỉnh theo chiều dọc.Bạn có thể thử

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
} 

Bằng cách đó bạn không phải sử dụng lề âm (không sai, chỉ gây tranh cãi).

Kiểm tra xem ra here

Answer 2

bạn có thể làm vị trí tương đối và sau đó đặt hàng đầu để một cái gì đó trừ. ví dụ:

position: relative; 
top:-10px; 
left:0px; 

Answer 3

này là thực sự nổi vấn đề

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div> 

css

.banner { 
    width:100%; 
float:left; 
} 

http://jsfiddle.net/eLbUU/4/

Answer 4

Trước hết, đặt màu nâu sẫm trong div nâu nhẹ hơn. Bằng cách đó, khi cửa sổ được kích thước lại, bạn không thỏa hiệp phần trăm kích thước và/hoặc khoảng cách.

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div> 

Và với khoảng trắng, bạn có thể sử dụng lề trái hoặc nổi như những người khác đã đề cập.

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
} 

fiddle here

Answer 5

Đưa display: block; cho lớp ảnh và float: left; cho tất cả các yếu tố khác có thể hữu ích.

.banner { 
    width:100%; 
    display:block; 
    float:left; 
} 

http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Xin lỗi sai Link)

Answer 6

sử dụng khối hiển thị và nổi divs, cũng đảm bảo img chính nó là hiển thị khối với tràn ẩn tôi đã có thể thắt chặt các sọc để img : fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}