CSS盒子模型是用于排版Web页面的重要概念。每个HTML元素都可以看作一个盒子模型，由外边距(margin)，边框(border)，内边距(padding)，和内容(content)四个部分组成。可以通过CSS代码来控制这些部分的大小和间距。

.box {
  width: 200px;
  height: 200px;
  margin: 20px;
  border: 1px solid black;
  padding: 10px;
}

上述代码定义了一个名为.box的CSS类，为一个200x200像素的盒子模型设置了20像素的外边距，1像素的黑色实线边框，和10像素的内边距。

如果要设置盒子模型与其他盒子之间的距离，可以使用margin属性。可以通过设置不同的margin值来控制盒子间的距离。

.box1 {
  margin-right: 20px;
}
.box2 {
  margin-left: 20px;
}
.box3 {
  margin-top: 20px;
}
.box4 {
  margin-bottom: 20px;
}

上述代码定义四个CSS类，它们分别控制了盒子模型的右边距，左边距，上边距，和下边距。这些代码可以用于排列多个盒子，控制它们之间的距离。

综上所述，CSS盒子模型是Web页面排版中的重要概念，掌握盒子模型与盒子间距代码的使用可以使Web设计更加灵活多样。