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

#主{
宽度：100%；
显示：表格；
边框：5px黑色实心；
}
#左{
宽度：75%；
显示：表格单元格；
背景色：#f0；
边框：2个红色实心；
}
#对{
宽度：25%；
显示：表格单元格；
/*背景色：#000000*/
边框：2个绿色实体；
}
#摄影中心{
位置：相对位置；
}
#大的{
宽度：80%；
}
#小的{
宽度：25%；
位置：绝对位置；
左：-20px；
顶部：-20px；
z指数：1；
}

$180
$180
$180
$180
$180
$180

空白区域是因为父div上有一个

5px

边框和

body

标记的填充

以使大图像居中。你必须这样做

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

替换此css

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

---

我的意思是你的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;
}

查看下面的演示链接：

JSFIDDLE

---

添加“垂直对齐：顶部；”在

#对的

谢谢，但是你知道如何制作我的右桌单元格的大照片中心吗？

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