В каких случаях надо использовать width:100% вместо width:auto?

Question

[gera7]

Ведь auto учитывает border+padding+margin, a width этого не учитывает. Для чего/когда надо использовать width:100%?

Comments

[Сергей Сергей]

очевидно, когда нет отступов и границ.

Answer 1

[GreatRash]

width: auto; - позволяет браузеру самому рассчитать ширину элемента.
width: 100%; - заставит браузер растянуть элемент на 100% ширины родителя.

Например для элемента div правила width: auto; и width: 100%; будут эквивалентны, т.к. по умолчанию браузер обязан растягивать блочные элементы на всю ширину родителя (если они в потоке конечно же).

Представим теперь, что у нас есть картинка (img) размером 100 на 100 пикселей. Если мы скажем ей width: auto;, то она так и останется шириной 100 пикселей. А вот если мы скажем ей width: 100%;, то она растянется на всю доступную ей ширину.

Вот когда нам нужно чтобы какой-то элемент занимал всю доступную ему ширину, и когда по умолчанию он этого делать не умеет, вот тогда нам необходимо ему явно сказать width: 100%;.

Comments

[gera7]

Спасибо, про картинки очень наглядно!

Answer 2

[Денис Инешин]

Не все элементы занимают по умолчанию всю область. Например элементы с display: table, display: inline-block или с position: fixed, position: absolute.

Кроме того можно выбрать как именно складывать внутренние отступы, в этом вам поможет box-sizing

Comments

[gera7]

gracias amigo!