Comment ajouter le remplissage ou la bordure d'un DIV et de garder la largeur et la hauteur?

Est-il un moyen de garder un ensemble de largeur/hauteur d'un DIV, et le pavé du contenu sans le DIV en croissance? Voir l'exemple ci-dessous. Je veux toutes les cases à être exactement 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;
}

Violon: http://jsfiddle.net/Wrc5S/

OriginalL'auteur CaptSaltyJack | 2012-03-12

  1. 21

    Oui, vous pouvez utiliser

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

    de changer le modèle de boîte à rendre les frontières et le rembourrage à l'intérieur de votre largeur/hauteur, mais les marges sont encore ajouté.

    et mise à jour de votre Violon

    plus d'informations ici css astuces

    Votre exemple est correct, mais vous de ne pas mentionner les source. Je vais retirer mon downvote si vous ajoutez que.
    il y a beaucoup de sources, a ajouté l'un de ceux que j'ai utilisé, 1er dans google pour box-sizing
    Oui, mais vous avez collé l'exemple à partir de là, les commentaires inclus, vous devez en mentionner la source. Downvote supprimé.
    ok juste un commentaire
    box-sizing seul fera l'affaire 🙂 caniuse.com/#search=box-sizing

    OriginalL'auteur Dampsquid

  2. 3

    Oui il suffit de soustraire deux fois le remplissage ou la frontière de la hauteur et de la largeur. En d'autres termes, il faut soustraire le rembourrage ou de bordure de chaque côté de la div: 

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

    violon exemple: http://jsfiddle.net/N6BYH/

    Ou de l'utilisation box-sizing: border-box; https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.

    OriginalL'auteur Matt Fryer

  3. 2

    Selon quels navigateurs vous avez besoin de soutien, vous pouvez changer la box-sizing attribut sur ces DIVs être border-box. Qui va vous permettre de définir une hauteur et une largeur de chaque boîte, sans rembourrage ou des frontières effectuer les dimensions que vous avez défini.

    Il a été suggéré par quelques personnes pour régler cela à l'échelle mondiale pour tous les éléments dans une réinitialisation parce que cela rend les choses beaucoup plus faciles à coiffer (et est sans doute un meilleur box-sizing modèle que celui par défaut). Pour ce faire, vous pouvez utiliser quelque chose comme:

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

    Plus d'informations, y compris la prise en charge du navigateur et quelques mises en garde générales peuvent être trouvés ici: http://paulirish.com/2012/box-sizing-border-box-ftw/

    OriginalL'auteur Matthew Darnell

  4. 1

    La méthode la plus sûre serait probablement nid <div> des balises dans votre <div> de balises et d'appliquer le rembourrage:

    <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 */
    beaucoup mieux que des hacks, et compatible sur tous les navigateurs!

    OriginalL'auteur Wex

  5. 0

    Oui la solution à votre problème est box-sizing:border-box; ( http://css-tricks.com/box-sizing/ , http://paulirish.com/wp-content/uploads/2011/gplus-boxsizing.html ) (fonctionne sous IE8+ et tous les navigateurs modernes)

    Dampsquid me battre pendant 1 seconde:/

    OriginalL'auteur George Katsanos