Css - 100% + дополнение?

Как известно большинству людей,

100% div с отступом 5px на самом деле 100% + 10px.

Одно очевидное решение для этого - обернуть дочерний div в оболочку с маркой 10px однако этот метод требует, чтобы вы добавили дополнительную разметку, я ищу способ сделать 100% + дополнение без дополнительного div.

любые идеи?

Ответ 1

Элементы блока, такие как <div>, автоматически принимают ширину 100% после заполнения. То есть вы должны иметь возможность добиться желаемого эффекта, просто указав заполнение, оставив ширину на auto и убедившись, что элемент имеет display: block (по умолчанию для <div>).

http://jsfiddle.net/EMYBm/8/

Ответ 2

Вы должны изучить свойство CSS box-sizing...

Я собрал пример, чтобы показать вам, как это работает, и разница между наличием свойства box-sizing и отсутствием его. Посмотрите скрипку...

http://jsfiddle.net/UnsungHero97/bKsad/2/

Обратите внимание, что это не будет работать в IE7 или ниже:/

Надеюсь, это поможет. Христо