Wie kann man eine DIV-Polsterung ändern, ohne die Breite / Höhe zu beeinflussen?

92

Ich habe ein Div, für das ich eine FESTE Breite und Höhe angeben möchte, und auch eine Auffüllung, die geändert werden kann, ohne die ursprüngliche DIV-Breite / -Höhe zu verringern oder zu erhöhen. Gibt es dafür einen CSS-Trick oder eine Alternative mit Auffüllung?

css html

— Ryan
quelle

72

Die Lösung besteht darin, Ihr gepolstertes Div mit einem äußeren Div mit fester Breite zu umwickeln

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
quelle

Ich bin mir nicht sicher, ob das klargestellt werden soll, aber das würde nur für horizontale Polsterung funktionieren, oder? Als Höhe: Auto füllt das übergeordnete Element nicht wie Breite: Auto aus.

— Jonathan Azulay

195

Deklarieren Sie dies in Ihrem CSS und Sie sollten gut sein:

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

Diese Lösung kann ohne Verwendung zusätzlicher Wrapper implementiert werden.

Dies zwingt den Browser, die Breite gemäß der "äußeren" Breite des Div zu berechnen. Dies bedeutet, dass die Auffüllung von der Breite abgezogen wird.

— adswebwork
quelle

es funktioniert wie ein Zauber Ich bin Neuling, suche einfach diese Eigenschaft und es funktioniert Great Man .....

— nida

1

Gibt es irgendwelche Nebenwirkungen, auf die ich achten sollte, wenn ich das benutze?

— Radi

15

Diese Lösung ist besser als die akzeptierte und es ist sicher, keine Präfixe mehr zu verwenden: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Du hast mir viel Zeit gespart. Danke dir.

— Hardik Chaudhary

17

Klingt so, als würden Sie das IE6-Box-Modell simulieren. Sie können dazu die CSS 3-Eigenschaft box-sizing: border-box verwenden . Dies wird von IE8 unterstützt, aber für Firefox müssten Sie verwenden -moz-box-sizingund für Safari / Chrome verwenden -webkit-box-sizing.

IE6 berechnet die Höhe bereits falsch, Sie sind also gut in diesem Browser, aber ich bin mir nicht sicher, ob IE7 die Höhe im Mackenmodus gleich berechnet.

— wsanville
quelle

CSS3 ist noch sehr neu wie das iPad :)

— Ryan

9

Versuchen Sie diesen Trick

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

Dies zwingt den Browser, die Breite gemäß der "äußeren" Breite des Div zu berechnen. Dies bedeutet, dass die Auffüllung von der Breite abgezogen wird.

— KA
quelle

5

Das ist das Gleiche wie die Antwort von @ adswebwork, oder? Ich schätze die Erklärung, wie es funktioniert, aber das ist wahrscheinlich besser als Kommentar

— craq

1

warum eine identische Antwort posten

— Andrew

4

Um ein konsistentes Ergebnis über den Browser hinweg zu erzielen, fügen Sie normalerweise ein weiteres divinnerhalb des hinzu divund geben an, dass keine explizite Breite vorhanden ist, und a margin. Das marginwird paddingfür das äußere Div simuliert .

— Pekka
quelle