子元素超过父元素padding-right和margin-right失效
padding和margin在内联元素的上下方位上是无效的，具体可以参阅为什么padding和margin在span中不好用一章节。
还有一种情况会让padding-right和margin-right失效失效，下面就通过代码实例做一下介绍。
当子元素的宽度超过父元素的时候，子元素的margin-right和父元素的padding-right就会失效。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="/" />
<title>实例</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#box {
width: 200px;
height: 150px;
background-color: red;
margin: 0px auto;
margin-top: 50px;
overflow: auto;
}
#inner {
width: 300px;
height: 100px;
background-color: blue;
font-size: 12px;
line-height: 12px;
text-align:right;
margin-right:1000px;
}
</style>
</head>
<body>
<div id="box">
<div id="inner">实例</div>
</div>
</body>
</html>
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至201542412@QQ.com举报，一经查实，本站将立刻删除。
上一篇：padding属性值的顺序
相关推荐
-
text-align对内联块级元素同样有效
这里只陈述一个事实，那就是txt-lign属性对于块级内联元素也是有效的。代码实例如下: r
-
radio美化代码实例
rdio单选按钮默认状态下并不美观，但是我们可以通过其他途径将其美化。代码实例如下:
-
js重置form表单元素值代码实例
本章节分享一段代码实例，它实现了使用jvscrit重置form表单元素值得功能。代码实例如下:
-
javascript获取form表单中表单元素的数目
本章节介绍一下如何获取form表单中表单元素的数目。实现方式非常的简单，只要使用form对象的lngth属性即可实现。代码如下: ht
-
call()和apply()方法使用代码实例
本章节分享几段关于cll()和ly()方法使用的代码实例。需要的朋友可以做一下参考，关于两个方法的基本用法这里不做介绍，可以参阅相关阅读。（1）.cll()方法可以参阅js cll()一章
