如何显示忽略父填充的内容

Question

这是一张桌子

这是onHover

时同一张表的设计

这很麻烦，原始div的父div具有padding来对齐表内容，因此，在onHover上，background-color也遵循相同的约束。就是这样：

如何解决此问题，如何使其突破填充限制？

我创建了一个codepen

Answer 1

这是吗？

.box {
  background-color: lightgrey;

}

.row {
  display: flex;
  padding: 16px;
}

.row:hover {
  background-color:red;
}

.cell {
  width: 33%;
}

<div class='box'>
  <div class='row'>
    <div class='cell'>
      1
    </div>
    <div class='cell'>
      2
    </div>
    <div class='cell'>
      3
    </div>
  </div>
</div>

Answer 2

在.cell上像这样放置左/右填充：

O(n*log(n))

https://codepen.io/anon/pen/wNmmxa

Answer 3

如何将其添加到您的CSS中？

.box:hover{background-color: red;}

https://codepen.io/vensa-albertgao/pen/yZKKXa