這裏是我的代碼：如何降低邊距的寬度值？
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'。還要添加「盒子大小：邊框」。 –