css盒子上方有空隙

有时候我们在使用CSS的时候会发现，设置了盒子的高度和宽度，但是却发现盒子上方多了一段空隙。这是因为在盒子的外部还有一些默认的样式影响到了盒子的显示。

解决这个问题可以通过将默认的样式清除，具体的做法就是将margin和padding设为0。同时还可以设置box-sizing属性为border-box，将盒模型设置为border-box模式，使得盒子的高度和宽度包含边框和内边距的大小。

div {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 

这样设置之后，就可以解决盒子上方多出空隙的问题了。