body是默认有内边距的,内边距是用padding设置的。为什么给body设置padding:0px不能消除内边距,而设置margin:0px却能够消除内边距?
设置body{margin:0px;padding:0px;} // 清除默认样式
关于这个问题:
1. 每种浏览器都有一套默认的样式表,在网页制作过程,没有指定相应的样式时,就会按照浏览器内置的样式表来渲染。
2. 举例说,IE6、IE7的body标签,默认的样式应该是:display:block;margin:15px 10px;zoom:1;(不是很确定),而没有预设padding值,chrome/firefox也只是设置了margin:8px;没有预设padding,从此可见,设置margin:0;即可消除边距了,这点可以通过简单的试验得出结果了。
3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法,应该是比较可靠的了。
4. 要彻底理解这个问题,可以去找每种浏览器的默认样式表分析,重置的原理就是利用css样式的相互覆盖的优先级权重,将浏览器默认样式(优先级最低)用开发者定义的样式覆盖掉。只要对照各种浏览器默认的样式就可以比较简单的理解这个问题了。
1. 每种浏览器都有一套默认的样式表,在网页制作过程,没有指定相应的样式时,就会按照浏览器内置的样式表来渲染。
2. 举例说,IE6、IE7的body标签,默认的样式应该是:display:block;margin:15px 10px;zoom:1;(不是很确定),而没有预设padding值,chrome/firefox也只是设置了margin:8px;没有预设padding,从此可见,设置margin:0;即可消除边距了,这点可以通过简单的试验得出结果了。
3. 注意不同的浏览器甚至同个浏览器不同版本的默认样式是不同的。body标签分别将margin和padding都重置为0这是网络上广为流传的重置方法,应该是比较可靠的了。
4. 要彻底理解这个问题,可以去找每种浏览器的默认样式表分析,重置的原理就是利用css样式的相互覆盖的优先级权重,将浏览器默认样式(优先级最低)用开发者定义的样式覆盖掉。只要对照各种浏览器默认的样式就可以比较简单的理解这个问题了。
目的: 1. 作用是Reset
(重置)浏览器默认样式,解决浏览器兼容性的问题,因为每个浏览器都有自己默认的内边距和外边距,使各浏览器样式统一,即使不同的分辨率也能显示相同的效果