谁能告诉我margin和padding的用法以及区别

发布网友 发布时间：2022-04-20 03:08

我来回答

共3个回答

热心网友 时间：2022-04-13 12:47

margin\padding在网页中是css样式

代码如下 a{margin:5px;padding:5px}

其实是有上下左右4个参数的,上边的写法是简写,实际上等价于

a{margin:5px 5px 5px 5px;padding:5px 5px 5px 5px;}

先解释下4个数字代表什么, 代表距离上、右、下、左的距离

margin 是标签距离周围标签的距离

padding 是标间内容和边框间的距离

图中红色表示元素，2个灰色框表示padding和margin

热心网友 时间：2022-04-13 14:05

margin
mar.gin
[`mɑrdʒIn; ˋmɑ:dʒin]
可数名词
1 缘,边,岸
sit on the ~ of a river
坐在河边
2 栏外,书页边的空白
write down in the ~
写在栏外
a note on the ~ of a page
页边空白的注解
3 最低限度, (接近) 界限 (的状态)
the ~ of cultivation
耕作的界限
on the ~ of bare subsistence
过最起码的生活
4 a. (时间、经费等的) 余裕; (活动等的) 余地
We have a ~ of 5 minutes to catch the train.
我们有五分钟宽余的时间赶上火车
b. (错误等的) 程度
allow for a ~ of error
把某种程度的误差考虑进去
5 a. (时间之) 差
b. (得票等的) 票差
by a huge [2-to-1] ~
以极大之差 [二比一之差]
6‘商’盈余,毛利,利润
a large [narrow] ~
大 [微小] 的利润
a low profit ~
小利润
~s on liquors
卖酒的利润
7‘股票’保证金
buy on margin
看涨买进,投机买进,保证金信用交易
by a narrow margin
差一点就…,险些…; 好容易才…
go near the margin
(道德上) 走到界限; 接近堕落边缘
及物动词
1 a. 在<书页>的栏外附上 [注解] [with]
b. 在<书页>上附上栏外注解,在…加上旁注
2 ‘股票’付 <股票等> 的保证金
padding
pad.ding
不可数名词
1 填塞; 衬垫的装填
2 衬垫; 填料
(旧棉、毛、稻草等)
3 (报纸、杂志等的) 填凑; 不必要的插入句,补白
pad
pad
[pæd; pæd]
可数名词
1 a. (防止摩擦、损伤的) 衬垫,垫子; 枕头; 填料
b. (为调整衣服形状而装在肩部等处的) 垫肩
c. (处理伤口、月经等所用有吸收性的) 卫生垫
d. (马的) 鞍褥
e.‘球戏’护胸; 护胫 (等)
f. (汽车圆盘煞车 (disc brake) 的) 衬垫
(用以压紧圆盘)
2 a. (动物的) 肉趾
(脚底的厚肉)
b. (狐狸、兔等的) 脚
3 (一张张撕开式信纸、便条纸等的) 一本,一叠
a writing ~ (
撕开式的) 信纸本
a drawing ~
图画纸簿
4 (橡皮章用的) 印泥; 印色 (盒) ; 打印台
→ inkpad.
5 (火箭等的) 发射台
→ launching pad.
6 (水莲等水生植物的) 浮叶
7(俚) (自己所住的) 房间,宿舍,公寓,房子 (等)
及物动词
(pad.ded; pad.ding)
1 装填,填塞,给<衣服等>装入棉 [衬垫,衬布]
~ the shoulders of a coat
给外衣垫肩
2 a. 给<文章等>填补空白,将 <文章、话> 不必要地拉长
b. 给<文章>添凑 [不必要的材料] ; [加不必要的材料] 拉长,添凑 <文章、话> [with]
The article is ~ded out with quotations from magazines.
那篇文章引用杂志上的话添凑篇幅
pad
[pæd; pæd]
不及物动词
(pad.ded; pad.ding)
1 不发出脚步声轻轻地走
2 不发出脚步声轻轻地走 [路] [along]

热心网友 时间：2022-04-13 15:40

padding 是内容与内容边框间的间隙，该区域有背景色，其背景色与内容区域相同
margin 是内容边框与父标签内容间的间隙，该区域是透明的，因此父标签的背景能显示出来，即margin的背景取决于父标签的背景。
例
<style type="text/css">
div {background-color:rgb(250,0,0)}
p {background-color:gray；padding:10px;margin:10px}
</style>
……
<div>
This is Div
<p>This is paragraph</p>
</div>
This is Div 显示为红色
This is paragraph 显示为灰色，其内容周围也有灰色的空白区域（padding的作用）,外部的margin却显示为红色了