2009-09-05 23 views
25

मैं यहां केले जा रहा हूं, किसी भी तरह से मेरे पृष्ठ में मेरी सभी छवियों के नीचे एक अंतर है, एक मार्जिन जो कोड में नहीं है। यहां तक ​​कि फायरबग इसे भी नहीं देख सकता है लेकिन फ़ायरफ़ॉक्स और सफारी इसे प्रस्तुत कर रहे हैं - बिना सीएसएस के सभी!एचटीएमएल, सीएसएस - चित्रों के नीचे अजीब अदृश्य मार्जिन

इससे पहले कभी मुझे खुश न करें ...!

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

इससे पहले कि आप अपने html शुरू यह एरिक मेयेर के लिए अपने style.css –

+0

खोज करने के लिए reset.css पुस्तकालय में से एक में शामिल करने के लिए बेहतर है reset.css –

+0

कभी कभी यह रूप में this other answer में दिखाया गया है, अपने HTML में खाली स्थान के की वजह से हो सकता है। – Kibbee

उत्तर

-1

ठीक है, मुझे मिल गया।

यह

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

क्यों लाइन ऊंचाई 1 है यदि फ़ॉन्ट आकार 0 है ??? – CoR

66

का एक संयोजन यह वास्तव में है कि असामान्य नहीं है था। ऐसा इसलिए है क्योंकि छवि एक इनलाइन तत्व है इसलिए छवि के निचले भाग के बीच कुछ जगह है, जो पाठ की आधार रेखा पर और टेक्स्ट लाइन के नीचे स्थित है।

छवि का एक ब्लॉक तत्व में बदलने के लिए इसका सबसे आसान समाधान display:block; का उपयोग करना है। float:left; या float:right; का उपयोग करके छवि को फ़्लोट करना भी काम करता है क्योंकि यह इसे ब्लॉक तत्व में भी बदल देता है।

vertical-align, font-size और जैसे गुणों को समायोजित करने से दूरी को भी प्रभावित किया जा सकता है, लेकिन यह उतना मजबूत नहीं है जितना कि यह वास्तव में प्रभाव को हटा नहीं देता है। यह अभी भी कुछ परिस्थितियों में दिखाई दे सकता है।

संबंधित प्रश्न:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue

+1

यह सही उत्तर है। –

12

को जवाब देने के लिए खेद यह सवाल 3 साल बाद में, लेकिन यह पृष्ठ पहले Google पेज में है और मुझे जिम्मेदारी महसूस होती है ..... उत्तर: केवल जोड़ें "लंबवत-संरेखण: शीर्ष;" से img टैग के अंदर टैग।

4

मुझे

font-size: 0; 
line-height: 0; 
रैपिंग कंटेनर पर

के लिए चाल किया था।

संबंधित मुद्दे