मैं अपने टेबल सेल को भरने के लिए एक छवि को कैसे मजबूर कर सकता हूं

Question

मैंने कई मंचों के माध्यम से पढ़ा है और वहां समाधान की कोशिश की है, लेकिन उनमें से कोई भी काम नहीं कर रहा है, फिर भी मेरी सभी छवियों के बीच एक छोटा सा अंतर है। यहाँ कोड है:

<table id="Table"> 
      <tr> 
       <td id="td1"><h2>~ Curling ~</h2></td> 
       <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
       width="100%" height="100%" border="2" alt=""/></td> 
       <td id="td1"><h2>~ Curling ~</h2></td> 
      </tr> 
</table> 


#td1 { width: 32%;vertical-align: text-top; } 
#td2 { padding-right: 5px; padding-top: 5px; } 

Answer 1

छवि एक इनलाइन तत्व है और क्योंकि यह कैसे आधारभूत के साथ गठबंधन किया है यह नीचे कुछ सफेद स्थान है।

इसे ठीक करने के लिए, कोशिश:

#td2 img {display: block;} 

या

#td2 img {vertical-align: bottom;} 

फिडल डेमो: http://jsfiddle.net/audetwebdesign/WxrvC/

नोट कि आप छवि के शीर्ष और सही करने के लिए 5px गद्दी की स्थापना की है , और मुझे लगता है कि स्टाइल उद्देश्यों के लिए है।

इसके अलावा, id गुण एक पृष्ठ पर अद्वितीय होना चाहिए, class का उपयोग करें, बनाए रखने के लिए बहुत आसान है और सीएसएस नियमों का आसान पुन: उपयोग करने की अनुमति देता है।

Answer 2

विभिन्न ब्राउज़रों अलग डिफ़ॉल्ट गद्दी/मार्जिन/रिक्ति आदि के साथ HTML तत्वों प्रस्तुत करना .. आप इस तरह इन रीसेट की कोशिश कर सकते हैं:

#table td {padding: 0px; margin: 0px;} 
#table {border-spacing: 0px;}