margin和padding的区别以及什么时候使用

您所在的位置:网站首页 网页制作padding是什么意思 margin和padding的区别以及什么时候使用

margin和padding的区别以及什么时候使用

2024-07-17 03:56| 来源: 网络整理| 查看: 265

margin和padding的区别以及什么时候使用

首先需要明白,盒子模型主要定义四个区域:内容(content)、边框与内容的区域,称为内边距(padding)、边框(border)、边框与外部的区域,称为外边距(margin)。

区别 margin:表示边框以外的区域 padding:表示边框与内容之间的区域 使用场景 使用margin的场景: 需要在border(边框)以外的区域添加空白间距时;空白区域不需要使用背景颜色时注意:上下两个相连的盒子之间使用的外边距需要相互抵消。需要使用负值对页面布局时(注意:margin的值可以取负数,padding的值是不能使负数的)

margin需注意:

​ margin在垂直方向上相邻的值相同时会发生叠加,水平方向的值会相加。margin取负值时,在垂直方向上,两个元素的边界仍然会重叠,但是,此时一个为正数,一个为负数,并不是取其中较大的值,而是用边界的绝对值,也就是正的边界值和负的边界值相加。

使用padding的场景: 需要在border内侧添加空白空白区域需要使用到背景颜色注意:上下相连的两个盒子之间的空白,间距是两者之和

最后,需注意margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间距;margin用于布局分开元素,使元素与元素互不干扰;padding用于元素与内容之间间隔,让内容与元素之间有一段距离。

最后的最后,在怪异盒模型中,一个块的总宽度受marign影响,但不受padding的影响。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3