为什么我的表格区域上方有额外的空白区域？

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