爲什麼我的表格區域上方有額外的空白區域？

Question

#main { 
 
    width: 100%; 
 
    display: table; 
 
    border: 5px black solid; 
 
} 
 
#left { 
 
    width: 75%; 
 
    display: table-cell; 
 
    background-color: #F0F0F0; 
 
    border: 2px red solid; 
 
} 
 
#right { 
 
    width: 25%; 
 
    display: table-cell; 
 
    /*background-color: #000000;*/ 
 
    border: 2px green solid; 
 
} 
 
#photo-center { 
 
    position: relative; 
 
} 
 
#large { 
 
    width: 80%; 
 
} 
 
#small { 
 
    width: 25%; 
 
    position: absolute; 
 
    left: -20px; 
 
    top: -20px; 
 
    z-index: 1; 
 
}

<div id="main"> 
 
    <div id="left"> 
 
    <div id="photo"> 
 
     <div id="photo-center"> 
 
     <img src="image/1.jpg" id="large"> 
 
     <img src="image/2.jpg" id="small"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="right"> 
 
    <table> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="#">buy</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="##">buy</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="#">buy</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="#">buy</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="#">buy</a> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="price">$180</td> 
 
     <td class="buy"> 
 
      <a href="#">buy</a> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

爲什麼有多餘的空白區域，我的右表孔區域上方，如何設置左表細胞的大照片中心？

Answer 1

空白區域是由於父div上有5px邊框和來自body標記的填充。

爲了集中大的圖像。你必須這樣做。

#large { 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
} 

Answer 2

更換這個CSS

#right { 
    border: 2px solid green; 
    display: table-cell; 
    vertical-align: top; 
    width: 25%; 
} 

Answer 3

我的意思是你的CSS網頁應該是這樣的：

#main { 
    width: 100%; 
    display: table; 
    border: 5px black solid; 
} 
#left { 
    width: 85%; 
    display: table-cell; 
    background-color: #F0F0F0; 
    border: 2px red solid; 
} 
#right { 
    width: 15%; 
    display: table-cell; 
    /*background-color: #000000;*/ 
    border: 2px green solid; 
} 
#photo-center { 
    position: relative; 
} 
#large { 
    width: 80%; 
} 
#small { 
    width: 25%; 
    position: absolute; 
    left: -20px; 
    top: -20px; 
    z-index: 1; 
} 

Answer 4

檢查下面演示鏈接：

的jsfiddle https://jsfiddle.net/DhwaniSanghvi/ntpfjpvx/

<div id="main"> 
    <div id="left"> 
    <div id="photo"> 
     <div id="photo-center"> 
     <img src="http://lorempixel.com/g/400/200/" id="large"> 
     <img src="http://lorempixel.com/g/400/200/" id="small"> 
     </div> 
    </div> 
    </div> 
    <div id="right"> 
    <table> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="#">buy</a> 
     </td> 
     </tr> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="##">buy</a> 
     </td> 
     </tr> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="#">buy</a> 
     </td> 
     </tr> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="#">buy</a> 
     </td> 
     </tr> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="#">buy</a> 
     </td> 
     </tr> 
     <tr> 
     <td class="price">$180</td> 
     <td class="buy"> 
      <a href="#">buy</a> 
     </td> 
     </tr> 
    </table> 
    </div> 
</div> 

---

#main { 
    width: 100%; 
    display: table; 
    border: 5px black solid; 
} 
#left { 
    width: 75%; 
    display: table-cell; 
    background-color: #F0F0F0; 
    border: 2px red solid; 
} 
#right { 
    width: 25%; 
    display: table-cell; 
    vertical-align:top; 
    /*background-color: #000000;*/ 
    border: 2px green solid; 
} 
#photo-center { 
    position: relative; 
} 
#large { 
    margin:0 auto; 
} 
#small { 
    width: 25%; 
    position: absolute; 
    left: -20px; 
    top: -20px; 
    z-index: 1; 
}