Tablonun 1px İstenmeyen Dolgusu Başlarken

Question

Bazı nedenlerden dolayı 1px dolgu veya bir tablo kenarlığı alıyorum. Bundan nasıl kurtulacağımı anlayamıyorum. Resimlere display:block;margin:0;padding:0; eklemeyi denedim, ancak bunu çözmüyor. Ayrıca CSS'de <table border="0"> ve border:none;'u denedim. Hayatım boyunca bunu anlayamıyorum.

Bunun nedeni bir sorun çünkü görüntülerin her iki tarafındaki kenarlarla aynı hizaya gelmesini sağlamaya çalışıyorum çünkü CSS3 kenarlık yarıçapı TR'lerde çalışmıyor. CSS'ye table, table * {border:1px solid red;} ekledim ve bundan böyle bir dolgu veya kenar boşluğu sorunu gibi görünüyor.

sorunu bu görüntüde geçerli: sol ve sağ taraflarında

, görüntü ve tablo kenarı arasındaki dolgu falan çeşit olduğu görülüyor. Kırmızı sınırlar sadece bunu görmek için var.

table a { 
    color: #f7941E; 
    font-family: Arial; 
    font-size: 16px; 
    font-weight: bold; 
    /* css3 */ 
    transition: color .25s; 
    -khtml-transition: color .25s; 
    -moz-transition: color .25s; 
    -o-transition: color .25s; 
    -webkit-transition: color .25s; 
} 

    table a:hover { 
     color: #f8ae57; 
    } 

table { 
    width: 610px; 
} 

    table tr { 
     height: 33px; 
     padding: 0; 
     margin: 0; 
     vertical-align: middle; 
    } 

     table td { 
      border-collapse: collapse; 
     } 

    table tr.head { 
     color: #58585a; 
     font-family: Rockwell, serif; 
     font-size: 18px; 
     font-weight: bold; 
     text-transform: lowercase; 
    } 

    table tr.even { 
     background: #EEE; 
     height: 33px; 
    } 

     table tr td img { 
      padding: 0 15px 0 13px; 
      vertical-align: middle; 
     } 

      table tr td a img { 
       opacity: .6;     
       /* css3 */ 
       transition: opacity .25s; 
       -khtml-transition: opacity .25s; 
       -moz-transition: opacity .25s; 
       -o-transition: opacity .25s; 
       -webkit-transition: opacity .25s; 
      } 

       table tr td a img:hover { 
        opacity: 1; 
       } 

Ve HTML:

İşte benim CSS

<table border="0"> 
    <tr> 
     <td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;"> 
     <td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td> 
     <td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;"> 
    </td> 
</table> 

Answer 1

Dene: <table border="0" cellpadding="0" cellspacing="0">

Answer 2

Bu benim için şeyleri düzeltmek gibiydi.

CSS:

table { 
    width: 610px; 
    border-spacing:0; /* Add this here */ 
} 

Answer 3

Sorunum bazı garip davranış oldu ve kitaptaki bütün hileleri denemiş, ama bu dolgu inatçıydı. Sonunda body elemanı için belirlenen line-height niteliği, padding-top etkisi yarattığını, öğrendim.

line-height: normal;

arasında, yerelleştirilmiş bir kurala, hangi geçersiz kılma sonra ... Sorun çözüldü.