Как добавить дополнение или границу к DIV и сохранить ширину и высоту?
Есть ли способ сохранить заданную ширину/высоту для DIV и пропустить контент без увеличения DIV? См. Пример ниже. Я хочу, чтобы все ящики были ровно 140x140.
HTML:
<div class="box1">Howdy.</div>
<div class="box2">Howdy.</div>
<div class="box3">Howdy.</div>
CSS
.box1 {
width: 140px;
height: 140px;
background: #f66;
}
.box2 {
width: 140px;
height: 140px;
background: #66f;
padding: 1em;
}
.box3 {
width: 140px;
height: 140px;
background: #6f6;
border: 1em solid #000;
}
Fiddle: http://jsfiddle.net/Wrc5S/
Ответы
Ответ 1
Да, вы можете использовать
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
чтобы изменить модель окна, чтобы сделать границы и заполнять внутренние по отношению к вашей ширине/высоте, но поля по-прежнему добавляются.
и обновленный Fiddle
Дополнительная информация здесь css трюки
Ответ 2
Да, просто вычтите дважды отступы или границу из высоты и ширины. Другими словами, вычтите отступ или границу с каждой стороны div
:
.box1
{
width: 140px;
height: 140px;
background: #f66;
}
.box2
{
width: 130px;
height: 130px;
background: #66f;
padding: 5px;
}
.box3
{
width: 130px;
height: 130px;
background: #6f6;
border: 5px solid #000;
}
Пример скрипки: http://jsfiddle.net/N6BYH/
Или используйте box-sizing: border-box;
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.
Ответ 3
В зависимости от того, какие браузеры вам нужны для поддержки, вы можете изменить атрибут размера окна на этих DIV, чтобы он был граничным. Это позволит вам установить высоту и ширину на каждом поле без прокладки или границ, которые будут влиять на установленные вами размеры.
Некоторые люди предложили установить глобально для всех элементов в reset, потому что это упрощает стиль (и, возможно, является лучшей моделью выбора размера окна, чем стандартная). Для этого вы должны использовать что-то вроде:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Более подробную информацию, включая поддержку браузера и некоторые общие предупреждения, можно найти здесь: http://paulirish.com/2012/box-sizing-border-box-ftw/
Ответ 4
Самый чистый метод, вероятно, заключается в том, чтобы вложить теги <div>
в ваши текущие теги <div>
и применить к ним дополнение:
<div class="box" id="box1"><div>Howdy.</div></div>
<div class="box" id="box2"><div>Howdy.</div></div>
<div class="box" id="box3"><div>Howdy.</div></div>
CSS
.div { /* ... */ }
.div > div { padding: 1em; } /* Apply to all inner divs */
#box2 > div { padding: 1em; } /* Only apply to the inner div in #box2 */
Ответ 5
Да, решение вашей проблемы - размер окна: border-box; (http://css-tricks.com/box-sizing/, http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html) (работает в IE8 + и все современные браузеры)