Verhindern, dass Polsterung ein Element größer macht?

Lesezeit: 2 Minuten

nkcmr

Ich habe ein Element mit a 70% Breite, und es schwebt neben einem anderen Element mit 30% Breite. Wenn ich jedoch hinzufüge 25px des Auffüllens erweitert sich das Element und bricht das Format.

Gibt es eine Möglichkeit, den Abstand des Inhalts vom Rand des Elements zu vergrößern, anstatt das Element größer zu machen?

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  float: left;
  width: 30%;
  background-color: lightgreen;
}

.padded {
  padding: 25px; /* Forces box onto next line */
}

<div>Works:</div>
<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

<br><br>

<div>Broken:</div>
<div class="seventy">70% wide</div>
<div class="thirty padded">30% wide, padded</div>

Codelerche

Wenn Sie die verwenden border-box Modell ist die Polsterung in der Kartongröße enthalten. Sehen Hier für Details.

.seventy {
  float: left;
  width: 70%;
  background-color: lightsalmon;
}

.thirty {
  box-sizing: border-box;
  padding: 25px;
  float: left;
  width: 30%;
  background-color: lightgreen;
}

<div class="seventy">70% wide</div>
<div class="thirty">30% wide</div>

Obwohl korrekt, ist die Unterstützung für Box-Sizing etwas lückenhaft. Erwägen Sie, einen kleinen Prozentsatz von einer der Breiten abzuziehen und ihn der Polsterung hinzuzufügen. Also Ihre 2 Breiten + Polsterung = 100%. BEARBEITEN ~ Zeta Twos-Lösung garantiert eine Lücke von 25 Pixel, was eine bessere Lösung wäre.

– Süßbrötchen

3. März 2011 um 5:22 Uhr

Ich würde ein anderes Element des gleichen Typs (darf ich vermuten, dass es ein div ist?) innerhalb des Elements erstellen und dieses auf einen Abstand/Rand von 25 Pixel einstellen.

Zum Beispiel:

<div id="wrapper">
 <div id="width30">
 </div>
 <div id="width70">
  <div id="padding25">
   Acctual content here.
  </div>
  </div>
 </div>
</div>

Dies ist eine super intelligente Lösung, die die Leute mehr berücksichtigen sollten. Es gibt keine skizzenhaften CSS-Hacks, keine potenziell nicht unterstützten Browser und es folgt einem sauberen Container-Content-Muster. Ich bin froh, etwas KISS CSS (CISS?) Zu sehen, da es so einfach zu überarbeiten ist.

– Nicht ich

13. Februar 2017 um 22:04 Uhr

14371600cookie-checkVerhindern, dass Polsterung ein Element größer macht?

#CSS #html #Layout #Polsterung