盒模型的应用

第一次写博客的我，心情贼紧张，哈哈。。废话不多说接下来我给大家分享的是盒模型里margin和padding的用法，希望能对各位看官有所帮助。

盒模型具体的css属性分为两种：

1、margin（外边距）：它的含义你可以理解为同级元素之间我想让它俩产生上下间距或者左右间距时，可以使用margin，margin不会改变盒子内部的大小；
2、padding（内填充）：是长在内容与盒子之间的距离，主要控制子元素在盒子内部的位置关系，且padding只能添加在父元素上面，添加padding原先的盒子会被padding值撑开（变大）所以相应的父元素宽高需要减去padding值，如果一个块状元素没有设置宽高（被内容撑开的大小）padding的值不需要减去。

以上是对盒模型具体的css属性的解释，下面我们看下实际操作案例（案例均使用的是div）

假如我想让一个盒子里面的内容与盒子之间产生一定的间距，我们该怎么做，例如：

我们想让文本对盒子的四周产生一定的间距，这个时候我们可以给这个盒子添加padding属性，让整个文本挤下来，代码实现与实现效果图如下：


这个时候我想肯定有人在想用margin实现不可以吗？
margin的用途是同级元素之间产生间距，我们想让内容与盒子之间产生间距，最好还是使用padding在盒子有宽高的时候，添加padding值对应的宽高要减去，不然会影响你网页布局的大小。
如果盒子没有大小，我之间添加padding，这个时候是不需要减去padding的值，因为盒子我没有设置大小，那我盒子的宽就是与浏览器同宽，高则是被内容撑开的，如下所示：


如果我想单方面内容与盒子之间产生间距可不可以？
可以，因为padding是支持单一方向设置的：


padding属性支持后面书写多个属性，比如：padding：属性值1 属性值2 属性值3 属性值4;
属性值1：是内容的上方；
属性值2：是内容的右方；
属性值3：是内容的下方；
属性值4：是内容的左方；
（以上是按照顺时针的方向进行）
如果只有2个值，比如：padding：属性值1 属性值2；
属性值1：是上下；
属性值2：是左右；
有3个值呢，比如：padding：属性值1 属性值2 属性值3；
属性值1：是上方；
属性值2：是左右；
属性值3：是下方；
css代码与实现效果：

margin的设置与padding是大同小异的，它俩的不同点就是，margin是作用于同级元素，padding是作用于父子元素，给父元素添加让子元素在父元素里面发生位置的变化。

假如我想让下图的2个同级盒子上下产生间距，这个时候就需要使用到margin的用法，为什么呢？因为margin的作用是控制同级元素，让它俩产生间距的一个属性。

这个时候我们就只需要给两个盒子都添加margin属性即可：


这里面有一个很重要的点，没有设置浮动的两个盒子，之间的margin区域是重叠的，值是不叠加的就是元素1的下方跟元素2的上方margin值是不叠加的，但是设置了float的两个盒子，不管是上下显示，还是左右显示，值都是叠加的。

与padding相同的是margin也支持单一方向设置：


margin属性也支持后面书写多个属性，比如：margin：属性值1 属性值2 属性值3 属性值4;
属性值1：是内容的上方；
属性值2：是内容的右方；
属性值3：是内容的下方；
属性值4：是内容的左方；
（以上是按照顺时针的方向进行）
如果只有2个值，比如：margin：属性值1 属性值2；
属性值1：是上下；
属性值2：是左右；
有3个值呢，比如：margin：属性值1 属性值2 属性值3；
属性值1：是上方；
属性值2：是左右；
属性值3：是下方；
css代码与实现效果：

以上就是我在逆战班学习到的盒模型的margin和padding两个属性的应用，希望能帮到你，谢谢各位的观看。