这里是我的代码：如何降低边距的宽度值？
div{
border: 1px solid red;
height: 20px;
}
span{
display: table;
border: 1px solid green;
height: 10px;
width: 100%;
margin-left:20px;
}<div>
<span></span>
</div>正如你看到的，绿盒子是出于在右侧红框。这是因为20px左边的余量应用在红色框上。
我该如何将这个边距和绿框放入红框？
注：最我的网站的用户使用旧的浏览器。所以我不想使用calc()。
试试这个。
div{
border: 1px solid red;
height: 20px;
padding-left: 20px;
}
span{
display: table;
border: 1px solid green;
height: 10px;
width: 100%;
}<div>
<span></span>
</div>使用继承;
div{
border: 1px solid red;
height: 20px;
}
span{
display: block;
border: 1px solid green;
height: 10px;
width: inherit;
margin-left:20px;
}<div>
<span></span>
</div>如果完全不使用“宽度”，会有什么不同？ –
谢谢..但对不起，我在我的问题中写了'display'属性错误。我编辑它。请再看一遍。 –
@MuhammadUsman如果未指定宽度，默认为自动，这意味着它根据其中元素的数量增长和缩小 – Laazo
width: 100%删除：
div{
border: 1px solid red;
height: 20px;
}
span{
display: block;
border: 1px solid green;
height: 10px;
margin-left:20px;
}
谢谢..但对不起，我写了'display'属性我的问题错了。我编辑它。请再看一遍。 –
只是删除宽度
div{
border: 1px solid red;
height: 20px;
}
span{
display: block;
border: 1px solid green;
height: 10px;
margin-left:20px;
}<div>
<span></span>
</div>谢谢..但对不起，我在我的问题中写了'display'属性错误。我编辑它。请再看一遍。 –
这有帮助吗？
div{
border: 1px solid red;
height: 20px;
}
span{
display: block;
border: 1px solid green;
height: 10px;
width: auto;
margin-left:20px;
margin-right:20px;
}<div>
<span></span>
</div>也许这不会适合你，因为我修改比我更应该，但可能是有用的...
如果显示跨度块而不是作为一张桌子，并改变你的保证金为无流动的位置，你可以实现你的期望，但这可能会影响这些项目与他们的环境的关系。
div {
border: 1px solid red;
height: 20px;
position: relative;
}
span {
display: block;
border: 1px solid green;
height: 10px;
position: absolute;
left:20px;
right: 0px;
top: 0px;
bottom: 0px
}<div>
<span></span>
</div>
只是删除'宽度：100％' –
@MuhammadUsman我已经编辑我的问题。在当前版本中，删除'width'不会给我预期的结果。 –
那么，我的变种不适合你当前的版本。但是从子项中删除'margin-left'并在父项中添加'padding-left'。还要添加“盒子大小：边框”。 –