如何降低边距的宽度值?
这里是我的代码:如何降低边距的宽度值?
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'。还要添加“盒子大小:边框”。 –