常見的圖片?

怎樣理解呢看下面例如

'

設置的屬性如下

.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

?

總結

以上是生活随笔為你收集整理的CSS盒模型( CSS margin 属性)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。