where does this margin is come from?

Question

On the below code an unwanted margin is automatically created from an unknown source.please help me to figure it out "where does that is come from?". i"m adding the snippet and and screen shot on below for better understanding of the problem

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>

score 1 · Accepted Answer · edited Jan 30 '18 at 16:06

It's from the display: inline-block, use float: left instead

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

1 Answers1