为什么背景颜色在display:block下和display:inline-block下的范围不同

Question

html:

<div class="white-box">
    <div id="methods-box" class="column">
                
    </div>
</div>

css:

.white-box{
    background-color: #fff;
    #methods-box {
        display: inline-block;
        margin: 0.35rem;
        padding: 0.35rem;
        background-color: #464D5E;
        border-radius: 5px;
    }
}

methods-box有padding也有margin：

如果methods-box的display是block的话，白色背景的范围是这样的：

但是如果display是inline-block或者是inline-flex的话，margin部分也会有白色背景：

Answer 1

块级元素默认width100%，行级块宽度就是它自身的宽度