类似的问题被多次询问，但我的问题更为笼统！
对于第一个问题，我在这里找到了一个准确的答案： Display Inline-Block with Widths as Percent
假设我们在html文件中有一个<div>元素并为其添加一些样式;
请注意宽度是100％，它应该放在整个屏幕宽度上，不应该走出屏幕
（在此代码段中元素的边框越过右侧的屏幕！）：
body{
margin:0;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}<div id="section1">
hello
</div>
但是，通过我找到的答案，
如果我将box-sizing: border-box;添加到css文件中，<div>元素的视图将会正常运行！这没关系。
（运行此代码段以查看结果）：
#section1{
box-sizing: border-box;
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}<div id="section1">
hello
</div>
到目前为止我没有遇到任何问题，这只是介绍了解我的第二个问题：
如果我们有嵌套的
<div>元素，上述单词就不起作用了！
我经常搜索，但这对我的例子来说并不有效！
并且link部分回答了这个问题，但没有多大效果！
这是我想要的结果：here
这个片段是我的样本，这两个＆＃34;你好＆＃34;线条不会相互发生！：
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
在不更改显示属性或添加负边距的情况下，最简单的方法是什么？！
答案 0 :(得分：0)
body{
margin: 0;
}
.section2{
box-sizing: border-box;
display:inline-block;
width:50%;
border: green 2px solid;
}<div id="section2">
<div id="section2-1" class="section2"> hello</div
><div id="section2-2" class="section2">hello</div>
</div>
它正在运作，但我做了什么？我只是用40％测试，看到你的两个div之间有一个空格，所以只删除了空格（实际上是一个带有一些表格的新行）
答案 1 :(得分：0)
问题来自元素旁边的空白区域，当您使用display: inline-block;时会自动生成
一个技巧是删除空格，因为你也看到了here。
如果您不想更改显示属性并且不删除代码缩进（空格）：
最简单方式是添加此属性：
box-sizing: border-box;
float: left;
more关于box-sizing属性
more关于float属性
body{
margin: 0;
}
*{
box-sizing: border-box;
}
#section1{
display: inline-block;
width: 100%;
text-align: center;
font-size: xx-large;
border: red 5px solid;
}
#section2{
display: inline-block;
width: 100%;
font-size: xx-large;
border: blue 3px solid;
}
.section2{
display:inline-block;
width:50%;
border: yellow 5px solid;
float: left;
}<div id="section1">
hello
</div>
<br>
<br>
<br>
<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>
答案 2 :(得分：0)
内联块元素为white-space dependent，您可以参考此答案，详细了解display as block, inline and inline-block之间的区别。有很多方法可以删除此white-spacing，其中一个将font-size 0添加到parent div #section2，然后手动将font-size分配给他们儿童元素。
body{
margin: 0;
}
#section2{
font-size:0;
}
.section2{
font-size:18px;
box-sizing: border-box;
display:inline-block;
width:50%;
background: green;
}<div id="section2">
<div id="section2-1" class="section2"> hello</div>
<div id="section2-2" class="section2">hello</div>
</div>