首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

关于 margin跟padding的区别

2012-10-08 
关于 margin和padding的区别?1.首先弄清楚什么事元素: HTML 元素指的是从开始标签(start tag)到结束标签(e

关于 margin和padding的区别



?1.首先弄清楚什么事元素:
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
就是:元素=标签+元素的内容,而内容可以有也可以没有。
参考:http://www.w3school.com.cn/html/html_elements.asp

2.理解每个元素都有border属性。
? 没有设置border时,border默认为0.

3.margin和padding 他们都是围绕这个border这个变化的。
? 如下面
margin:
<html>
<body>
?? <p style="background:red; margin-top:200px;? border: 1 solid">
??????? 这个段落没有指定外边距。
??? </p>
?? </body>
</html>
说明:设置margin后 p元素就会相对body向下移动200px;(你可以去掉margin-对比一下)

padding:
<html>
<body>
?? <p style="background:red; padding-top:200px;? border: 1 solid">
??????? 这个段落没有指定外边距。
??? </p>
?? </body>
</html>
说明:设置padding后 p元素就会相对border向下移动200px;就是说元素border变的宽了200px;

你可以用下面的列子对比
<html>
<body>
?? <p style="background:red; margin-top:200px;padding-top:200px;? border: 1 solid">
??????? 这个段落没有指定外边距。
??? </p>
?? </body>
</html>
注意:一定要理解元素的定义和每个元素都有border属性。

?关于 margin跟padding的区别

热点排行