css - 当 block 为 "expanded"时，通过增加其填充和应用负边距，布局中断

Question

有点难以用语言表达，所以 here's the jsFiddle显示它。

当将鼠标悬停在其中一个绿色 block 上时，我希望它的背景足够大以“触及”相邻的矩形(它与它们的边距重叠)。然而，当鼠标悬停在每一行的最后一个 block 上时，布局变得乱七八糟:下面的行只显示一个元素，等等。

原因似乎源于负边距；因为，如果“扩展”类的边距设置为普通 0 而不是 -5，则不会发生此问题。但是当然这会在 block 之间留下一个空间。

父容器的大小似乎不会改变这一点。请注意，目前我并不是特别担心扩展 block 没有很好地居中并使其行中的其他 block 稍微摇晃这一事实，尽管它可能与问题有关。

Answer 1

将extended的de padding改为10px http://jsfiddle.net/TMXLz/4/