负的margin值为什么可以改变块状元素的宽度?
页面代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>CSS负边距测试</title>
<style type="text/css">
#test-width, #test-width2 {
text-align: center;
margin-right: auto;
margin-left: auto;
width: 400px;
height: 80px;
background-color: purple;
}
#test-block, #test-block2 {
background-color: blue;
}
#test-block2 {
margin-right: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div id="test-width">No2父元素
<p id="test-block">我是No2子元素 </p>
</div>
<hr />
<div id="test-width2">No2父元素
<p id="test-block2">我是No2子元素 </p>
</div>
</body>
</html>
结果是这样的：
为什么给加上负的margin值后p的宽度会加大?
我在这篇文章中看到挺详细的介绍，但是博主对于设置margin-left:-100px后左边p元素宽度增加100px宽度的原因只是一笔略过了，我在Chrome的控制台调来调去也看不明白负margin改变p宽度的原理。求解，谢谢
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
因为P为block元素且没有指定width，则p的width+padding+border+margin=父级div的width（这里都是说的水平方向）。
这里假定padding,border为0。父级div width为400px。p的width为inherit。不设置margin，则p的width为400px。正如text-block。
当
margin-left:-100px;，p.width + (-100px) = 400px。So, p的width就变成了500px。这里说的p都是假定为inherit width。如果指定了p的width，则margin-left,margin-top为负值会引起p元素位置的变化。
利用margin-left和margin-right负值特性结合calc(-50vw + 50%)可以实现在限宽的容器中实现全屏效果,效果很赞。
相关链接：http://www.w3cplus.com/css/fu...