Jak zmienić wyściółkę DIV bez wpływu na szerokość / wysokość?

93

Mam element div, dla którego chcę określić STAŁĄ szerokość i wysokość, a także wypełnienie, które można zmienić bez zmniejszania lub zwiększania oryginalnej szerokości / wysokości DIV, czy jest na to sztuczka CSS, czy alternatywa z użyciem dopełnienia?

css html

— Ryan
źródło

72

Rozwiązaniem jest owinięcie wyściełanego elementu DIV z zewnętrzną płytą DIV o stałej szerokości

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

— Juraj Blahunka
źródło

Nie chcę tego wyczyścić, nie jestem pewien, ale działałoby to tylko w przypadku dopełnienia poziomego, prawda? Tak jak wysokość: auto nie wypełnia rodzica tak jak szerokość: auto.

— Jonathan

200

Zadeklaruj to w swoim CSS i powinieneś być dobry:

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

To rozwiązanie można wdrożyć bez użycia dodatkowych opakowań.

Zmusi to przeglądarkę do obliczenia szerokości zgodnie z „zewnętrzną” szerokością elementu div, co oznacza, że wypełnienie zostanie odjęte od szerokości.

— adswebwork
źródło

działa jak urok, jestem nowicjuszem, po prostu przeszukaj tę nieruchomość i działa Great Man .....

— nida

1

Czy są jakieś skutki uboczne, o których powinienem pamiętać, używając tego?

— Radi

16

To rozwiązanie jest lepsze od przyjętego i nie można już używać prefiksów: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Zaoszczędziliście mi dużo czasu. Dziękuję Ci.

— Hardik Chaudhary

17

Wygląda na to, że chcesz zasymulować model pudełkowy IE6. Aby to osiągnąć, możesz użyć właściwości CSS 3 -size-size: border-box . Jest to obsługiwane przez IE8, ale w przypadku przeglądarki Firefox musisz użyć, -moz-box-sizingaw przypadku Safari / Chrome - użyj -webkit-box-sizing.

IE6 już źle oblicza wysokość, więc jesteś dobry w tej przeglądarce, ale nie jestem pewien co do IE7, myślę, że obliczy wysokość tak samo w trybie dziwactw.

— wsanville
źródło

css3 jest wciąż bardzo nowy, jak iPad :)

— Ryan,

10

spróbuj tej sztuczki

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

zmusi to przeglądarkę do obliczenia szerokości zgodnie z „zewnętrzną” szerokością elementu div, co oznacza, że wypełnienie zostanie odjęte od szerokości.

— KA
źródło

5

to jest to samo, co odpowiedź @ adswebwork, prawda? Doceniam wyjaśnienie, jak to działa, ale to chyba lepsze jako komentarz

— Craq

1

dlaczego publikować identyczną odpowiedź

— Andrew,

4

Aby uzyskać spójny wynik w różnych przeglądarkach, zwykle dodaje się kolejną divwewnątrz divi nie podaje jawnej szerokości, a margin. marginBędzie symulować paddingna zewnętrznym div.

— Pekka
źródło