Question

我使用table，table-cell创建了两个表。但是当我在第一个单元格上增加填充时，它也会增加第二个单元格上的填充，反之亦然。是什么原因以及如何解决它。

.desc-one{
  width: 100%;
  margin-bottom: 20px;
  display: table;
}

.desc-one-one{
  width: 350px;
  background-color: #ffffff;
  display: table-cell;
  padding-right: 10px;
  border-radius: 10px;
  vertical-align: top;
  box-shadow: 0px 2px 1px #888888;
}

.quick-heading{
  font-size: 20px;
  font-family: opensans-semibold;
  color: #2199e8;
  padding-left: 10px;
  padding-top: 5px;
}
.row-two-one{
  max-width: 1200px;
  border-radius: 10px;
  background-color: #ffffff;

  box-shadow: 0px 2px 1px #888888;
}
.desc-one-two{
  display: table-cell;
  padding-left: 20px;
}
.recent-heading{
  color: #2199e8;
  font-size: 20px;
  font-family: opensans-semibold;
}

<div class="desc-one">
  <div class="desc-one-one">
    <h1 class="quick-heading">
      Quick links
    </h1>
  </div>
  <div class="desc-one-two">     
    <div class="row-two-one">
      <h1 class="recent-heading open-semibold">
        Low Stock Distributors
      </h1>
    </div>
  </div>
</div>

在CSS代码中：如果我增加第一个表格单元格标题的填充顶部/填充底部，则第二个单元格元素也采用第一个单元格中提到的填充（反之亦然）

Answer 1

我已经尝试过你的代码，发现只有第一个标题才能获得填充顶部。也许你的页面上有另外一些代码添加了这个额外的填充。

＆＃13;

.desc-one {
  width: 100%;
  margin-bottom: 20px;
  display: table;
}
.desc-one-one {
  width: 350px;
  background-color: #ffffff;
  display: table-cell;
  padding-right: 10px;
  border-radius: 10px;
  vertical-align: top;
  box-shadow: 0px 2px 1px #888888;
}
.quick-heading {
  font-size: 20px;
  font-family: opensans-semibold;
  color: #2199e8;
  padding-left: 10px;
  padding-top: 100px;
}
.row-two-one {
  max-width: 1200px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 2px 1px #888888;
}
.desc-one-two {
  display: table-cell;
  padding-left: 20px;
}
.recent-heading {
  color: #2199e8;
  font-size: 20px;
  font-family: opensans-semibold;
}

＆＃13;

<div class="desc-one">
  <div class="desc-one-one">
    <h1 class="quick-heading">
                    Quick links
                </h1>
  </div>
  <div class="desc-one-two">
    <div class="row-two-one">
      <h1 class="recent-heading open-semibold">
                      Low Stock Distributors
                    </h1>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你的代码工作得很好，正如其他答案所说..

但是，在一条评论中，您注意到如果您从第一个单元格的样式中删除vertical-align:top，它的工作方式就如您所述。
那么为什么你首先在那里拥有这个房产？它将此事混淆给想要回答的人。

答案是，如果您未指定任何vertical-align属性，则默认为“baseline”。这意味着两个单元格的内容彼此对齐，位于每个单元格的第一行文本的底部。这就是表格单元格的行为方式;他们一起工作。

因此，解决方案是将vertical-align:top放入，这会导致单元格将其内容对齐到顶部。

使用table-cell时，<div>填充自动增加

2 个答案: