[分享]css两个模块没有间距

CSS是网页设计中必不可少的一部分，它为网页提供了样式和布局。其中两个CSS模块是：CSS box model和CSS ing，在网页布局过程中非常常用。但是，有时候我们会发现这两个模块之间并没有间距...

CSS是网页设计中必不可少的一部分，它为网页提供了样式和布局。其中两个CSS模块是：

CSS box model

和

CSS positioning

，在网页布局过程中非常常用。但是，有时候我们会发现这两个模块之间并没有间距，这在一些情况下会影响网页展示效果。下面我们就来看看这个问题出现的原因及如何解决。

首先，我们需要了解CSS box model的基本知识。CSS box model指的是每个HTML元素都被视为一个盒子，这个盒子由四个部分组成：外边距(margin)、边框(border)、内边距(padding)和内容(content)。而CSS positioning则是控制盒子在网页中的位置和布局。

问题出现的原因是因为在某些情况下，我们可能会设置了一个元素的定位为绝对定位，这时就会发生这样的情况。比如下面这个例子：

 <div class="box"></div>

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
} 

这里的.box元素被设置为了绝对定位，并且top和left都设置为了50%，这就使得这个盒子会出现在页面的中间。但是，由于我们没有设置.margin或者.padding，所以就出现了CSS box model和CSS positioning之间没有间距的情况。

那么，问题该如何解决呢？其实很简单，只需要在CSS中为元素设置margin或padding即可。比如，我们加上一段CSS代码：

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
} 

这里我们设置了box盒子的上、左margin值为负的宽度一半。这就使得盒子与其他元素之间有了间距，同时还能保持其在页面中居中显示。

综上所述，CSS box model和CSS positioning没有间距的情况是由于我们没有设置margin或padding值引起的。解决方法就是根据需要设置margin或padding值，并使盒子在页面中居中显示。