css下面比上面少一块

在CSS中，有时候我们会碰到下面会比上面多一块的问题。这是因为在CSS盒子模型中，元素的高度是由内容高度、内边距和边框高度总和决定的。而当我们设置元素的高度时，我们只设置了内容高度，没有考虑内边距和边框高度。

.box {
  height: 100px;
  padding: 10px;
  border: 1px solid black;
} 

在上面的CSS代码中，我们设置了一个元素的高度为100px，内边距为10px，边框为1px。而实际上，这个元素的高度应该是122px，由于元素的内容高度是80px，内边距高度为20px，边框高度为2px。所以，在我们没有考虑到内边距和边框高度的情况下，下面的元素就比上面的元素多了一块。

解决这个问题的方法有两种。一种是我们可以在设置高度时，将内边距和边框的高度也计算进去，从而得到正确的高度值。另一种方法是使用box-sizing属性，将元素的盒子模型改为border-box模型。这样，元素的高度就会包含内容、内边距和边框高度。

.box1 {
  height: 122px;
  padding: 10px;
  border: 1px solid black;
}

.box2 {
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
} 

在上面的CSS代码中，我们分别演示了两种方法的使用。box1元素的高度为122px，考虑到了内边距和边框高度。而box2元素则将盒子模型改为了border-box模型，所以它的高度就只需要设置为100px就可以了，不需要再考虑内边距和边框高度。