Lề thêm 5px được thêm vào cuối mỗi div

Question

Tôi đang cố gắng thiết kế một tiêu đề đơn giản cho một trang trong css. Tôi đã lên kế hoạch để ngăn xếp hai div trên đầu trang của nhau. Phần trên cùng có nhiều tab và phần dưới cùng là một hình ảnh đơn lẻ đơn thuần. Nhưng khi dựng hình tôi thấy rằng thêm 5px được thêm vào chiều cao của cả hai div này. Vì vậy, tôi không thể đặt đáy trên chính xác trên đầu trang của một trong những khác.

Có một lề dưới 5px tự động. Tôi đã thử lợi nhuận tiêu cực, thiết lập lại lề toàn cầu và paddings bằng không. Vẫn không sử dụng.

Có mã.

<div class ="main_nav"> 
<div class="first_tab"> 
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> 
</div> 
<div class = "ind_tab"> 
<img src ="images/startup/tab1_orange.png" height="25" width="90" alt="Temp"/> 
</div> 
<div class = "ind_tab"> 
<img src ="images/startup/tab1_brown.png" height="25" width="90" alt="Temp" /> 
</div> 
</div> 
<div class="lock"> 
<img src ="images/startup/divbg_new.png" alt="Temp" /> 
</div> 

CSS:

*{ margin:0; padding:0; } 
ul.master_navigation 
{ 
    font-size: 125%; 
    font-weight: bold; 
    text-align: center; 
    list-style: none; 
    margin: 0.5em 0; 
    padding: 0; 
} 

ul.master_navigation li 
{ 
    display: inline-block; 
    padding: 0 1%; 
} 

a 
{ 
    color: #08f; 
    font-weight: bold; 
    text-decoration: none; 
} 

a:visited 
{ 
    color: #88f; 
} 

a:hover 
{ 
    color: #f00; 
} 

p 
{ 

    text-align: justify; 
} 


p.cent 
{ 
    text-align: left; 
} 

div.header 
{  
    height: 200; 
} 

div.main_nav 
{ 
    display: inline-block; 
    height: 25; 

    width: 900; 
    padding: 0; 
    margin: 0; 
    vertical-align: bottom; 

} 

div.first_tab 
{  
    height: 25; 
    float: left; 


} 
div.ind_tab 
{  

    height: 25; 
    float: left; 
    margin-left: -10px; 
    z-index: -5; 

} 

div.lock 
{ 
    margin-top: -100; 
    height: 91; 
    width: 900; 
    padding: 0; 
    margin: -5; 

} 

cơ thể {

width:900px; 
    max-width: 100%; 
    margin: auto; 
    padding: 0; 
    background-image:url(images/startup/bg_2.gif); 
    background-repeat:repeat-x; 
} 

.pad 
{ 
    padding: 0; 
    margin: 0; 

} 

Dưới đây là các liên kết đến trang

http://net4.ccs.neu.edu/home/pradep/

Tôi đã dành quá nhiều thời gian cho việc này. Hãy giúp tôi.

Answer 1

Bạn cần chỉ định đơn vị trên khai báo CSS của mình.

http://jsfiddle.net/m7YCW/

div.main_nav 
{ 
    display: inline-block; 
    height: 25px;  /* set px */ 
    width: 900; 
    padding: 0; 
    margin: 0; 
    vertical-align: bottom;  
} 

Tìm hiểu để tận dụng các công cụ phát triển của bạn trong Chrome, nếu bạn có chuột phải cài khuy trên các yếu tố và lựa chọn -> kiểm tra nó sẽ mang đến những công cụ dev. Sau đó, bạn có thể xem các khu vực 'chỉ số' và 'các kiểu tính toán' để thấy rằng main_nav được hiển thị dưới dạng 30px thay vì 25px và cũng có một biểu tượng cảnh báo bên cạnh tuyên bố 25 css và nó đã bị xóa một cách rõ ràng.

Answer 2

Thử đặt vertical-align:bottom trên hình ảnh.

Answer 3

Tôi nghĩ rằng sự cố của bạn là line-height. Yup, đúng rồi. Chỉ cần thêm line-height:0, trên firebug và họ bị mắc kẹt với nhau.

Điều về khối nội tuyến là chúng hoạt động giống như bất kỳ văn bản nội tuyến nào, bạn cũng gặp vấn đề tương tự trên điều hướng bên dưới, bởi vì bạn đã nhập mã của bạn, nó sẽ hiển thị nó dưới dạng không gian và thêm thêm x lề cho bên phải và bên trái là tốt. X ở đây sẽ phụ thuộc vào kích thước phông chữ.

Để giải quyết việc này, bạn có thể tag hoặc gần gũi và cởi mở trên cùng một dòng như dưới đây:

<div> 
. 
. 
. 
</div><div> 
. 
. 
. 
</div> 

hoặc bạn có thể thiết lập các font-size và line-height-0, nhưng thats không phải lúc nào cũng có thể nếu bạn don không có các bộ chọn khác bên trong div đó.

Answer 4

Câu trả lời của Ege rất hữu ích đối với tôi. Tôi đã dành hàng giờ để tìm ra lý do đệm đáy của một số hình ảnh trong div's. Đó là dòng chiều cao.Đặt nó thành 0px ở các khu vực thú vị:

.divclass { 
    line-height: 0px; /* crucial for bottom padding 0 !!! */ 
}