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

Question

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

Answer 1

Объявите это в своем CSS, и вы должны быть хороши:

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

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

Answer 2

Решение - обернуть ваш мягкий 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;
}

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Для достижения согласованного кросс-браузерного результата вы обычно добавляете еще один div в div и не указываете явную ширину, а margin. margin будет имитировать padding для внешнего деления.