盒模型:padding和margin

本文详细介绍了CSS中的padding和margin属性。padding用于设置元素内部与内容之间的距离,可以改变盒子大小并控制子元素位置;margin则定义元素与其他元素间的空间,不改变元素自身尺寸。同时,讲解了padding和margin的单独方向设置,以及margin的居中技巧和常见问题。了解这些能更好地掌握页面布局和元素间距的调整。
摘要由CSDN通过智能技术生成
一:PADDING

padding用法 用法:

1:padding是在盒子里面,在盒子与内容之间。

2:padding的作用:控制子元素在父元素里面的位置关系。

3:padding会把盒子撑大。

4:如果想让盒子保持原有的大小:在宽高基础上减掉。( 如果一个元素是被内容撑开的,没有设置固定的宽高,padding直接撑开。不用减掉 )

5:如果给单一方向添加padding

padding-top/bottom/left/right

6:padding的设置特点:

padding:30px; 四周

padding:10px 30px; 上下 左右

padding:10px 30px 50px 上 左右 下

padding:10px 30px 50px 100px 上右下左

7:padding不会对背景图的位置造成影响。
二:MARGIN

margin用法 用法 (外 (外边距、 距、边界) 界)

1:margin在元素外围,不会撑大元素的大小

2:作用:控制元素与元素之间的间距。

3:给单一方向添加margin

margin-left/right/top/bottom

4 :margin设置方法:

margin:30px; 四周

margin:10px 30px; 上下 左右

margin:10px 30px 50px 上 左右 下

margin:10px 30px 50px 100px 上右下左

5:margin:0 auto;

让当前元素在父元素里面左右居中。

6:margin常出现的bug

a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。

b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margintop,会错误放在父元素上面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值