garder rembourrage de faire le plus grand élément?

J'ai un élément avec 70% de la largeur, et il est flottant à côté d'un élément avec 30% de largeur, mais quand j'ajoute 25px de rembourrage, il étend l'élément et les pauses le format, est-il un moyen pour augmenter le contenu de la distance à partir du bord plutôt que de simplement faire plus grosse?

  • Nous allons voir un peu de votre code
InformationsquelleAutor nkcmr | 2011-03-03
  1. 49

    Lorsque vous utilisez le border-box modèle, le rembourrage est inclus dans la boîte taille. Voir ici pour plus de détails.

    <!DOCTYPE html>
<html>
    <head>
        <title>padding example</title>
        <style type="text/css">
        .seventy {
            display: block;
            float: left;
            width: 70%;
            background-color: red;
        }
        .thirty {
            display: block;
            float: left;
            width: 30%;
            padding: 25px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            background-color: green;
        }
        </style>
    </head>
    <body>
        <div class="seventy">Stuff</div>
        <div class="thirty">More Stuff</div>
    </body>
</html>
    • Bien que corrext le soutien pour box-sizing est un peu louche. Envisagez de prendre un petit pourcentage d'une des largeurs et de l'ajouter à la marge. Donc, votre 2 largeurs+rembourrage = 100%. EDIT~ Zeta Deux solution garantir un écart de 25px qui serait une meilleure solution.
    • ai-je besoin d'-webkit et -moz?
    InformationsquelleAutor codelark
  2. 9

    Je voudrais créer un autre élément du même type (je suppose que c'est un div?) à l'intérieur de l'élément et réglez-la pour avoir une marge/marge de 25px.

    Par exemple:

    <div id="wrapper">
 <div id="width30">
 </div>
 <div id="width70">
  <div id="padding25">
   Acctual content here.
  </div>
  </div>
 </div>
</div>
    • C'est une super solution intelligente les gens devraient prendre en compte. Il n'y a pas de croquis des hacks css, pas de potentiellement non pris en charge navigateurs, et il en résulte un récipient propre contenu motif. Content de voir que certains KISS CSS (CISS?), puisque c'est si facile de sur-ingénieur.
    InformationsquelleAutor Zeta Two