2009-09-05 8 views
25

idę tu banany, jakoś poniżej wszystkich moich zdjęć na mojej stronie jest luka, margines którego nie ma w kodzie. Nawet Firebug nie widzi tego, ale Firefox i Safari go renderują - NAWET BEZ CSS!html, css - dziwny niewidoczny margines pod zdjęciami

Nigdy mi się nie zdarzyło przed ...!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Paranoid</title> 
<link rel="stylesheet" href="includes/style.css" type="text/css" /> 
</head> 
<body> 

    <div id="container"> 
     <div id="sidebar"> 
      <img src="images/logo.png" id="logo" /> 
      <ul id="menu"> 
       <li class="menu1">Main</li> 
       <li class="menu1">System</li> 
       <li class="menu1">View</li> 
       <li class="menu1">Policy</li> 
      </ul> 
      <div id="sidebar_bottom"></div> 
     </div> 
     <div id="main_content"></div> 
     <div class="clear"></div> 
    </div> 

</body> 
</html> 

body{ 
    background: #497e9f url(../images/bg.png) repeat-x top; 
} 
#container{ 
    width:864px; 
    margin: 8px auto 0 auto; 
} 
#sidebar{ 
    /*width:139px;*/ 
    float: left; 
} 
#sidebar_bottom{ 
    height:10px; 
    background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat; 
} 
#sidebar #logo{ 
    margin-bottom: 2px; 
} 
#sidebar #menu{ 
    background: #f2f2f2; 
    border: 0 1px solid #cecece; 
    margin: 0; 
    list-style: none; 
} 
+0

Przed rozpoczęciem html lepiej jest to jeden z biblioteki reset.css wyszukiwania style.css –

+0

Erica Meyera reset.css –

+0

Czasami może to być spowodowane spacji w kodzie HTML, jak pokazano na this other answer. – Kibbee

Odpowiedz

-1

Cóż, mam.

to była kombinacja

font-size: 0px; 
line-height: 1; 
+1

dlaczego wysokość linii 1, jeśli rozmiar czcionki wynosi 0 ??? – CoR

66

To nie jest w rzeczywistości, że rzadkie. Dzieje się tak dlatego, że obraz jest elementem śródliniowym, więc pomiędzy dnem obrazu jest trochę miejsca, które jest umieszczone na linii bazowej tekstu i na dole linii tekstu.

Najprostszym rozwiązaniem jest po prostu użycie display:block;, aby przekształcić obraz w element blokowy. Przesuwanie obrazu przy użyciu float:left; lub float:right; działa również tak, jak również zamienia go w element blokowy.

Regulacja właściwości takich jak vertical-align, font-size i line-height może również wpływać na odległość, ale nie jest tak solidna, ponieważ tak naprawdę nie usuwa efektu. Może się jeszcze pojawić w pewnych okolicznościach.

Powiązane pytania:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue

+1

To jest poprawna odpowiedź. –

12

przykro odpowiedzieć to pytanie 3 rok później, ale ta strona jest na pierwszej stronie google i czuję się odpowiedzialna ..... odpowiedź: tylko dodaj "vertical-align: top;" do img tag wewnątrz znacznik.

4

Dla mnie

font-size: 0; 
line-height: 0; 

na pojemniku owijania załatwiło sprawę.