html, css - marge invisible étrange ci-dessous des photos

je vais bananes ici, en quelque sorte en dessous de toutes mes images dans ma page il ya un écart, une marge qui n'est pas là dans le code. Même Firebug ne peut pas le voir mais Firefox et Safari le rendent - MEME SANS CSS DU TOUT!html, css - marge invisible étrange ci-dessous des photos

Ne me suis jamais arrivé avant ...!

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

Source

2009-09-05 Anonymous

Avant de commencer votre html il est préférable d'inclure un de la bibliothèque reset.css à votre style.css –

recherche eric meyer reset.css –

Parfois, il peut être dû à des espaces dans votre code HTML, comme indiqué dans this other answer. – Kibbee

-1

Eh bien, je l'ai compris.

ce fut une combinaison de

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

Source

2009-09-05 11:20:48

pourquoi la hauteur de la ligne 1 si la taille de la police est 0 ??? – CoR

Ceci est en fait pas si rare. C'est parce que l'image est un élément en ligne, donc il y a de l'espace entre le bas de l'image, qui est placé sur la ligne de base du texte, et le bas de la ligne de texte.

La solution la plus simple consiste à simplement utiliser display:block; pour transformer l'image en élément de bloc. Flottant l'image en utilisant float:left; ou float:right; fonctionne aussi comme cela le transforme également en un élément de bloc.

L'ajustement de propriétés telles que vertical-align, font-size et line-height peut également affecter la distance, mais il n'est pas aussi robuste car il ne supprime pas vraiment l'effet. Il pourrait encore apparaître dans certaines circonstances.

questions connexes:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue

Source

2009-09-05 12:25:00 Guffa

Ceci est la bonne réponse. –

Essayez de changer la section DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

Vous pouvez également vérifier: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

Source

2012-09-28 01:28:20 LRA

désolé de répondre à cette question 3 année plus tard, mais cette page est en première page google et je me sens responsable ..... réponse: seulement ajouter "vertical-align: top;" à img étiquette à l'intérieur a étiquette.

Source

2013-12-29 04:47:35 user3051858

Pour moi

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

sur le récipient d'emballage a fait l'affaire.

Source

2016-03-21 09:33:52 leymannx

html, css - marge invisible étrange ci-dessous des photos

Répondre

Questions connexes