Как изменить отступ DIV, не влияя на ширину / высоту?

93

У меня есть div, для которого я хочу указать ФИКСИРОВАННУЮ ширину и высоту, а также заполнение, которое можно изменить, не уменьшая исходную ширину / высоту DIV или увеличивая ее, есть ли для этого трюк CSS или альтернатива с использованием заполнения?

css html

— Райан
источник

72

Решение состоит в том, чтобы обернуть ваш мягкий div с фиксированной шириной внешнего div

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

— Юрай Блахунка
источник

Просто не хочу очищать, я не уверен, но это будет работать только для горизонтального заполнения, верно? Как height: auto не заполняет родительский элемент, как width: auto.

— Джонатан

200

Объявите это в своем CSS, и все будет хорошо:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

Это решение можно реализовать без использования дополнительных оболочек.

Это заставит браузер вычислять ширину в соответствии с «внешней» шириной div, это означает, что отступы будут вычтены из ширины.

— реклама
источник

это работает как шарм, я новичок, просто ищите эту собственность, и она работает, великий человек .....

— nida

1

Есть ли какие-либо побочные эффекты, о которых мне следует помнить при его использовании?

— Radi

16

Это решение лучше, чем принятое, и можно больше не использовать префиксы: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Вы сэкономили мне много времени. Спасибо.

— Hardik Chaudhary

17

Похоже, вы хотите имитировать коробочную модель IE6. Для этого вы можете использовать свойство CSS 3 box-sizing: border-box . Это поддерживается IE8, но для Firefox вам необходимо использовать, -moz-box-sizingа для Safari / Chrome - -webkit-box-sizing.

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

— Wsanville
источник

css3 по-прежнему очень новый, как и iPad :)

— Райан

10

попробуйте этот трюк

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

это заставит браузер вычислять ширину в соответствии с "внешней" шириной блока div, это означает, что отступы будут вычтены из ширины.

— KA
источник

5

это то же самое, что и ответ @ adswebwork, верно? Я ценю объяснение того, как это работает, но это, вероятно, лучше в качестве комментария

— craq

1

зачем публиковать идентичный ответ

— Эндрю

4

Чтобы добиться согласованного результата в кросс-браузере, вы обычно добавляете другой divвнутри divи не указываете ширину, а расширение margin. marginБудет имитировать paddingдля внешних дел.

— Пекка
источник