Как я могу уменьшить значение маржи ширины?

Question

Вот мой код:

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 margin left, который применяется к красному ящику.

Как я могу сохранить и этот запас и зеленый ящик в красную коробку?

---

Примечание: Большинство пользователей моего веб-сайта использовать старые браузеры. Поэтому я не хочу использовать calc().

Answer 1

Попробуйте это.

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>

Answer 2

Use inherit;

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>

Answer 3

Удалить width: 100%:

div{ 
    border: 1px solid red; 
    height: 20px; 
} 
span{ 
    display: block; 
    border: 1px solid green; 
    height: 10px; 
    margin-left:20px; 
} 

Answer 4

Просто удалите ширина

div{ 
 
    border: 1px solid red; 
 
    height: 20px; 
 
} 
 
span{ 
 
    display: block; 
 
    border: 1px solid green; 
 
    height: 10px; 
 
    margin-left:20px; 
 
}

<div> 
 
    <span></span> 
 
</div>

Answer 5

Помогает ли это?

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>

Answer 6

Может быть, это привычка подходит, поскольку я модифицирования больше, чем я должен, но может быть полезно ...

Если отобразить участок как блок, а не как таблицу и изменить свою маржу для безводной позиции, вы можете добиться того, что ищете, но это может повлиять на отношение этих предметов к их окружающей среде.

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>