Dodatkowy margines 5px dodawany do dolnej części każdego div

Question

Próbuję zaprojektować prosty nagłówek do strony w css. Planowałem ułożyć dwie części div na siebie. Górna ma wiele zakładek, a dolna jest zwykłym pojedynczym obrazem div. Ale podczas renderowania widzę, że dodatkowe 5 pikseli jest dodawane do wysokości obu tych elementów div. Więc nie jestem w stanie umieścić dołu dokładnie na drugim.

Jest dolny margines 5px automatycznie. Próbowałem ujemnych marginesów, zresetować globalne marże i paddings na zero. Nadal nie ma sensu.

Oto kod.

<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; 

} 

ciało {

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; 

} 

Oto link do strony

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

Ive spędzać zbyt dużo czasu na to. Proszę pomóż.

Answer 1

Musisz podać jednostki na swoich deklaracjach CSS.

http://jsfiddle.net/m7YCW/

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

Naucz się wykorzystywać swoich narzędzi programistycznych w Chrome, jeśli miał rację mysz guziki na elementach i wybrany -> wglądu byłoby przywołać narzędzia Dev. Następnie możesz przejrzeć obszary "metryk" i "stylów obliczonych", aby zobaczyć, że main_nav wyświetlał jako 30px zamiast 25px oraz że obok deklaracji 25 css był symbol ostrzegawczy i został on jawnie odrzucony.

Answer 2

Spróbuj ustawić vertical-align:bottom na zdjęciach.

Answer 3

Myślę, że Twój problem to line-height. Tak, jest. Właśnie dodałem line-height:0, na firebugu i utknęli razem.

Rzeczą bloków inline jest to, że zachowują się tak samo, jak każdy tekst śródliniowy, masz również podobny problem w nawigacji poniżej, ponieważ naciśniesz enter w swoim kodzie, to uczyni to jako nieprzestrzegającą przestrzeń i dodaj również dodatkowe marginesy x do prawej i lewej strony. X tutaj zależy od rozmiaru czcionki.

Aby rozwiązać ten problem, można albo zamykania i otwierania tagi na tej samej linii, jak poniżej:

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

lub można ustawić font-size i line-height do 0, ale nie zawsze thats możliwe, jeśli nie nie ma innych selektorów wewnątrz tego diva.

Answer 4

Odpowiedź Ege była dla mnie bardzo przydatna. Spędziłem godziny, aby znaleźć przyczynę dolnego dopełnienia niektórych obrazów w div. To była wysokość linii.Ustaw go na 0px w interesujących obszarach: