您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

详介Margin与Padding的区别

作者:佚名    责任编辑:admin    更新时间:2022-06-22

大家知道Margin与Padding的区别吗?下面我们就给大家详细介绍一下吧!margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。说白了,一个是内部的距离,一个是外部的距离;padding:内边距;margin:外边距。

两者都是代替表格最重要的作用->分割块的好方法,区别在于Margin是不同的Tag间互相隔离的距离而Padding是同一元素中不同内容分割使用,这在表格中最看得清楚。尤其是当对一个区域加载了背景样式之后,Padding下的内容背景色会发生改变,而Margin则不会有所改变。

margin的取值有:margin-top, margin-right, margin-bottom, margin-left

padding的取值有:padding-top, padding-right, padding-bottom, padding-left

简写法(举例):

四个边距均为10px:

h1 {margin: 10px}

顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:

h1 {margin: 10px 2%}

顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:

h1 {margin: 10px 2% -10px}

顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:

h1 {margin: 10px 2% -10px auto}

相信大家已经学会Margin与Padding的区别了吧!感谢大家对我们网站的支持!

相关推荐:

Class与ID的区别是什么