CSS盒模型( CSS margin 属性)

常见的图片 

怎样理解呢看下面例如

'

设置的属性如下

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;

}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
}

 

现在设置给红色的方块设置padding-tap 属性

代码如下

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;

}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
  padding-top: 20rpx;
}

效果图

那相对第一张图片 距离顶部有20rpx, 红色方块相对大方块并没有移动,但是文字却向下移动了 

在设置padding-left 看看

代码如下

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;

}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
  padding-top: 20rpx;
  padding-left: 20rpx;
}

效果图

 

红色方块变大了,因为设置的他的padding

在看看盒模型

padding增加要设置的content的距离 

padding 里面有四个属性

padding-top: 100rpx;

padding-left: 100rpx;

padding-bottom: 20rpx;

padding-right: 20rpx;

这四个分别是上下左右

如果是padding : 20rpx 则是上下左右的距离 

以上就是padding的使用,设置text 只是方便对比查看.

在看下盒模型上boder 这个也就是边框

先设置一下border-top看看

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;

}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
  border-top: 20rpx solid slateblue; 
}

 

效果图

border 就是给红色方块设置一个边框 ,使用solid 设置边框为实线,

(当然还可以设置其他的属相 dotted 点状 solid 实线 double 双实线 dashed虚线)

border 使用和padding类似有上下左右, 可以设置全部的可以单独设置

在看盒模型上的margin

设置了margin-left  和margin-top

设置下

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;
}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
  display:inline-block;
  margin-left: 30rpx;
  margin-top: 30rpx;
 
}

 

效果图

margin 是距离 使用的时候和padding一样有上下左右, 

如果使用margin 指的就是四个面的距离, 

margin 使用的时候需要注意的点就是父类控件有没有padding ,这样会导致距离出现误差

例如父类控件设置了padding-top

代码如下

.mian_one{
  width: 500rpx;
  height: 500rpx;
  background: #00d8a0;
  padding-top: 30rpx;
}

.main_two{
  width: 200rpx;
  height: 200rpx;
  background: red;
  display:inline-block;
  margin-left: 30rpx;
  margin-top: 30rpx;
 
}

效果图

距离顶部变的很大了......

margin 使用还需要注意的是

1 margin:10px 5px 15px 20px;

• 上外边距是 10px

• 右外边距是 5px

• 下外边距是 15px

• 左外边距是 20px

2 margin:10px 5px 15px;

• 上外边距是 10px

• 右外边距和左外边距是 5px

• 下外边距是 15px

3 margin:10px 5px;

• 上外边距和下外边距是 10px

• 右外边距和左外边距是 5px

4 margin:10px;

• 所有 4 个外边距都是 10px