子元素超过父元素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="http://www.pipipi.net/" /> <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>