这个保证金来自哪里？

Question

在下面的代码中，会从未知来源自动创建不需要的边距。请帮助我弄清楚＆＃34;它来自何处？＆＃34;。我在下面添加了片段和屏幕截图，以便更好地理解问题

image 1

＆＃13;

＆＃13;

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    display:inline-block;
    box-sizing: border-box;
    margin:0px;
}

＆＃13;

<div id="main-body">
            <div id="title-container"></div>
            <div id="button-container">
                <div id="home-button" class="btn"> Home</div>
                <div id="update-button" class="btn"> Update</div>
                <div id="delete-button" class="btn"> Create New</div>
                <div id="logout-button" class="btn"> Log Out</div>
            </div>
            <div id="data-container"></div>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

来自display: inline-block，使用float: left代替

#main-body{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    background: yellow;
}

#title-container{
    width:100%;
    height: 10%;
    background: red;
}

#button-container{
    width:100%;
    height: 10%;
    background-color: blue;
}

#data-container{
    padding: 5px;
    box-sizing: border-box;
    background-color: blueviolet;
}

.btn{
    width:25%;
    height: 100%;
    border: 1px solid black;
    /*margin:auto;*/
    float :left;
    box-sizing: border-box;
    margin:0px;
}

<div id="main-body">
            <div id="title-container"></div>
            <div id="button-container">
                <div id="home-button" class="btn"> Home</div>
                <div id="update-button" class="btn"> Update</div>
                <div id="delete-button" class="btn"> Create New</div>
                <div id="logout-button" class="btn"> Log Out</div>
            </div>
            <div id="data-container"></div>
        </div>