<分区>
<分区>
在下面的代码中，未知来源会自动创建不需要的边距。请帮我弄清楚“这是从哪里来的？”。我正在添加下面的代码片段和屏幕截图，以便更好地理解问题
#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>最佳答案
来自于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>关于html - 这个 margin 是从哪里来的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48525533/