Question

0 0

负的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宽度的原理。求解，谢谢