考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:设计制作 > CSS/HTML > 文章内容
  

CSS中Margin与Padding的区别以及两者用法

 [ 2017年6月27日 ] 【

padding margin都是边距的含义,关键问题得明白是什么相对什么的边距. 
padding是控件的内容相对控件的边缘的边距. 
margin是控件边缘相对父空间的边距. 

说白了,一个是内部的距离,一个是外部的距离;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}

本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved