Jak dodać dopełnienie lub obramowanie do DIV i zachować szerokość i wysokość?

Question

Czy jest jakiś sposób na zachowanie ustawionej szerokości/wysokości dla DIV i umieszczenie zawartości bez powiększania się DIV? Zobacz przykład poniżej. Chcę, żeby wszystkie pudełka miały dokładnie 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/

Answer 1

Tak można użyć

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 

aby zmienić model skrzynki, aby granice i dopełnienie interna l do twojej szerokości/wysokości, ale marginesy są nadal dodawane.

i zaktualizowaną Fiddle

więcej informacji tutaj css tricks

Answer 2

Tak rozwiązaniem problemu jest box-klejący: border-box; (http://css-tricks.com/box-sizing/, http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html) (prace w IE8 + oraz wszystkie nowoczesne przeglądarki)

Answer 3

zależności od przeglądarki trzeba wspierać, można zmienić atrybut wielkości pudełka na tych DIV border-box być. Umożliwi to ustawienie wysokości i szerokości na każdym polu, bez marginesów i obramowań wpływających na ustawione wymiary.

Kilka osób zasugerowało, aby ustawić to globalnie dla wszystkich elementów w resetowaniu, ponieważ ułatwia to styl (i jest prawdopodobnie lepszym modelem rozmiarów pudełek niż domyślny). Aby to zrobić, należy użyć coś takiego:

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

Więcej informacji, w tym wsparcie przeglądarki i pewne ogólne ostrzeżenia można znaleźć tutaj: http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

Tak po prostu odjąć dwa razy dopełnienie lub obramowanie z wysokości i szerokości (innymi słowy, odjąć napawania lub ramkę z każdej strony div): przykład

.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; 
} 

fiddle: http://jsfiddle.net/N6BYH/

Answer 5

najczystszy sposób byłoby prawdopodobnie gniazdo <div> tagi w ciągu aktualnych <div> tagów i zastosować dopełnienie do nich:

<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 */