关于 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属性。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值