簡單介紹margin與padding的用法

2021-10-03 04:22:44 字數 1824 閱讀 7674

1. margin與padding的寫法

padding : 內填充(內邊距)

寫了乙個值 : 30px ( 上右下左 )

寫了二個值 : 30px 40px ( 上下 左右 )

寫了三個值 : 30px 40px 50px( 上 左右 下)

寫了四個值 : 30px 40px 50px 60px ( 上 右 下 左)

指定方向

padding-left : 30px

padding-right : 30px

padding-top : 30px

padding-bottom : 30px

margin : 外邊距

寫了乙個值 : 30px ( 上右下左 )

寫了二個值 : 30px 40px ( 上下 左右 )

寫了三個值 : 30px 40px 50px( 上 左右 下)

寫了四個值 : 30px 40px 50px 60px ( 上 右 下 左)

指定方向

margin-left : 30px

margin-right : 30px

margin-top : 30px

margin-bottom : 30px

注意 : padding不能出現負值,margin是可以出現負值。

我們先建立乙個紅色的200×200畫素的div盒子,取名為box1,然後在裡面再建立乙個藍色的200×200的盒子,取名box2。

html源**

我是盒子1

我是盒子2

css**

#box1

#box2

此時執行如下

然後我們給box1加下margin(margin-bottom : 30px)

css**如下

#box1
此時的執行如下

此時兩個盒子之間的間距就變成了30px

然後我們給box1加padding( padding-left : 100px;)給box2也加上padding( padding-top : 100px;)

因為div新增了內邊距(padding)屬性,div的實際寬度=div的初始固定值+邊距值(高度同理)

例如我們將div設定為寬度為200px,新增100px的左邊的內邊距,該div的最後寬度為200+100=300px(高度同理)

所以如果需要給固定div新增內邊距,想要它不撐開,就將固定值設定為想要得到的寬度值與邊距值之差。所以我們將box1的寬高設定為100×200px,將box2的寬高設定為200×100px

css**

#box1

#box2

然後就變成我們想要的200×200的盒子了

盒模型布局如下所示

什麼時候用Margin?什麼時候用Padding?

這裡是修真院web小課堂,每篇分享文從 八個方面深度解web知識 技能,本篇分享的是 什麼時候用margin?什麼時候用padding?在html文件中,我們一般把html標籤粗分為塊級元素 block 和內聯元素 inline 塊級元素是是構成乙個html的主要和關鍵元素,任意乙個塊級元素均可以用...

margin介紹及網頁規劃思路

margin用法 外邊距 邊界 1 margin在元素外圍,不會撐大元素的大小 2 作用 控制元素與元素之間的間距。3 給單一方向新增margin margin left right top bottom 4 margin設定方法 margin 30px 四周 margin 10px 30px 上下...

Xshell簡單介紹與作用

xshell 是乙個強大的安全終端模擬軟體,它支援ssh1,ssh2,以及microsoft windows 平台的telnet 協議。xshell 通過網際網路到遠端主機的安全連線以及它創新性的設計和特色幫助使用者在複雜的網路環境中享受他們的工作。xshell可以在windows介面下用來訪問遠端...