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

У меня есть div, для которого я хочу указать фиксированную ширину и высоту, а также заполнение, которое можно изменить без уменьшения исходной ширины/высоты DIV или увеличения ее, есть ли для этого трюк CSS или альтернатива с использованием заполнения?

5 76
html css

5 ответов:

решение заключается в том, чтобы обернуть ваш мягкий 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;
}
63

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

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

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

146

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

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

15

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

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

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

5

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

4