这个保证金是从哪里来的？

Question

在下面的代码中，一个未知的边距自动创建 source.please 帮我弄清楚 "where does that is come from?"。我正在添加下面的代码片段和屏幕截图，以便更好地理解问题

image 1

#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;
}

<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>

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>

这个保证金是从哪里来的？

where does this margin is come from?

html

css

margin